Custom CSS

Gives the user the ability to specify custom CSS by typing cssFix() into the console

// ==UserScript==
// @name         Custom CSS
// @namespace    7721fa4ee33e18bcbd7aecd699b1190cdb58fad6
// @version      0.1
// @description  Gives the user the ability to specify custom CSS by typing cssFix() into the console
// @author       /u/AyrA_ch
// @match        http://*/*
// @match        https://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        unsafeWindow
// @external     true
// @expired      true
// ==/UserScript==

(function () {
    var storageKey = location.origin;
    var btnStyle = "font-size:12pt;font-family:sans-serif;width:100%;display:block;margin-top:5px;padding:5px;";
    var shown = false;
    var cssID = "cssTag_" + (Math.random() * 1000000 | 0);

    //Renders a div using proper DOM instead of just doing "innerHTML+=..." because that will erase event handlers
    var renderDiv = function () {
        //generate new random ID each time we do this
        var randID = "cssEle_" + (Math.random() * 1000000 | 0);

        //create DIV element for user control
        var div = document.createElement("div");
        //We set many attributes to override conflicting defaults from the sites stylesheet
        div.setAttribute("style",
                         "all:unset;z-index:" + Number.MAX_SAFE_INTEGER + ";position:fixed;" +
                         "padding:10px;background-color:#FFFFFF;color:#000000;background-image:none;" +
                         "border:2px solid #000000;border-radius:5px;width:500px;height:auto;" +
                         "left:10px;top:10px;right:auto;bottom:auto;");
        div.setAttribute("id", randID);

        //text area for css edit
        var txtField = document.createElement("textarea");
        txtField.style = "width:100%;height:300px;";
        txtField.value = GM_getValue(storageKey, "");
        div.appendChild(txtField);

        //Apply button
        var btnApply = document.createElement("input");
        btnApply.setAttribute("type", "button");
        btnApply.value = "Apply";
        btnApply.setAttribute("style", btnStyle);
        btnApply.addEventListener("click", function () {
            unsafeWindow.cssFix.apply(txtField.value);
        }, false);
        div.appendChild(btnApply);

        div.appendChild(document.createElement("br"));

        //Save button
        var btnSave = document.createElement("input");
        btnSave.setAttribute("type", "button");
        btnSave.value = "Save";
        btnSave.setAttribute("style", btnStyle);
        btnSave.addEventListener("click", function () {
            if(txtField.value){
                GM_setValue(storageKey, txtField.value);
                alert("Settings saved");
            }
            else{
                GM_deleteValue(storageKey);
                alert("Values removed");
            }
        }, false);
        div.appendChild(btnSave);

        div.appendChild(document.createElement("br"));

        //Restore button
        var btnRestore = document.createElement("input");
        btnRestore.setAttribute("type", "button");
        btnRestore.value = "Reset";
        btnRestore.setAttribute("style", btnStyle);
        btnRestore.addEventListener("click", function (e) {
            unsafeWindow.cssFix.apply(txtField.value = GM_getValue(storageKey, ""));
        }, false);
        div.appendChild(btnRestore);

        div.appendChild(document.createElement("br"));

        //Close button
        var btnClose = document.createElement("input");
        btnClose.setAttribute("type", "button");
        btnClose.value = "Close";
        btnClose.setAttribute("style", btnStyle);
        btnClose.addEventListener("click", function () {
            shown = false;
            div.remove();
        }, false);
        div.appendChild(btnClose);

        return div;
    };

    //This will show the cssFix div
    unsafeWindow.cssFix = function () {
        if (!shown) {
            shown = true;
            document.body.appendChild(renderDiv());
        }
    };

    //Reset everything
    unsafeWindow.cssFix.reset = function(){
        GM_deleteValue(storageKey);
        unsafeWindow.cssFix.apply("");
    };

    //Saves localStorage
    unsafeWindow.cssFix.apply = function (x) {
        var ele = document.querySelector("#" + cssID);
        if(!x){
            if(ele){
                ele.remove();
            }
        }
        else{
            if (!ele) {
                ele = document.createElement("style");
                ele.setAttribute("type", "text/css");
                ele.setAttribute("id", cssID);
            }
            ele.textContent = x;
            var head = document.querySelector("head");
            if (!head) {
                head = document.createElement("head");
                document.documentElement.appendChild(head);
            }
            head.appendChild(ele);
        }
    };
    //Load custom Settings
    unsafeWindow.cssFix.apply(GM_getValue(storageKey, ""));
})();

/*
LICENSE:
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
The full license text can be found here: http://creativecommons.org/licenses/by-nc-sa/4.0/
The link has an easy to understand version of the license and the full license text.

DISCLAIMER:
THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESSED OR IMPLIED WARRANTIES,
INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS
OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
THE POSSIBILITY OF SUCH DAMAGE.
*/