new picker barra Facebook figuccio

color picker all'interno della barra di Facebook

// ==UserScript==
// @name          new picker barra Facebook figuccio
// @namespace     https://greasyfork.org/users/237458
// @version       1.4
// @author        figuccio
// @description   color picker all'interno della barra di Facebook
// @match         https://*.facebook.com/*
// @grant         GM_addStyle
// @grant         GM_setValue
// @grant         GM_getValue
// @grant         GM_registerMenuCommand
// @require       https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @run-at        document-start
// @icon          https://facebook.com/favicon.ico
// @require       https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// @noframes
// @license        MIT
// ==/UserScript==
(function() {
    'use strict';
    var $ = window.jQuery;
    $(document).ready(function() {
        var body = document.getElementsByTagName("body")[0];
        var container = document.createElement("div");
        //container.style="top:1px;position:fixed;right:330px;"
        body.append(container);
        container.innerHTML = `
            <input type="button" id="colorspan" title="Hex color">${myColor}</button> Color<input type="color" list="colors" id="colorinput" value="${myColor}" title="Color picker">
        `;

        // Set the CSS style of menu elements
        GM_addStyle(`
            #colorspan { z-index:999999999999;position:fixed;top:13px;right:425px;color:darkred;border:2px solid green;border-radius:6px;cursor:pointer;}
            #colorinput { z-index:999999999999;position:fixed;top:10px;right:330px;border:2px solid yellow;border-radius:6px;cursor:pointer;}
        `);

        // User data for persistence
        var userData = { color: 'figuccio' };
        var myColor = /^#+\w+$/.test(GM_getValue(userData.color)) ? GM_getValue(userData.color) : "#980000";

        // Save custom data
        function saveSetting() {
            GM_setValue(userData.color, myColor);
            $('div[role="banner"]+div div[role="navigation"], div[role="complementary"], div[aria-label="Facebook"][role="navigation"]').css("background-color", myColor);
        }

        var colorInput = document.querySelector('#colorinput');
        var colorSpan = document.querySelector('#colorspan');

        // Color picker event
        colorInput.addEventListener('input', function(event) {
            colorChange(event);
        }, false);

        $('div[role="banner"]+div div[role="navigation"], div[role="complementary"], div[aria-label="Facebook"][role="navigation"]').css("background-color", myColor);

        // Color change function
        function colorChange(e) {
            myColor = e.target.value;
            colorSpan.innerHTML = e.target.value;
            document.getElementById('colorspan').value = myColor;

            // Update color immediately visible
            $('div[role="banner"]+div div[role="navigation"], div[role="complementary"], div[aria-label="Facebook"][role="navigation"]').css("background-color", myColor);
            GM_setValue(userData.color, myColor);
        }

        document.getElementById('colorspan').value = myColor;
        document.getElementById('colorinput').value = myColor;

        saveSetting(); // Save
        window.setTimeout(saveSetting, 3000); // Wait 3 seconds and resave the color
    });
})();