☰

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.6
// @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.6.0/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");
        body.append(container);
        container.innerHTML = `
            <input type="button" id="colorspan" title="Hex color" value="${myColor}"> Color<input type="color" list="colors" id="colorinput" value="${myColor}" title="Color picker">
        `;

GM_addStyle(`
    #colorspan {
        z-index: 999999999999;
        position: fixed;
        top: 11px;
        right: 300px;
        color: darkred;
        border: 1px solid green; /* Bordo più sottile */
        border-radius: 4px; /* Raggio minore */
        cursor: pointer;
        font-size: 12px; /* Dimensione testo ridotta */
        padding: 3px 4px; /* Riduzione margini interni */
    }
    #colorinput {
        z-index: 999999999999;
        position: fixed;
        top: 10px;
        right: 249px;
        border: 1px solid yellow; /* Bordo più sottile */
        border-radius: 4px; /* Raggio minore */
        cursor: pointer;
        width: 50px; /* Larghezza ridotta */
        height: 25px; /* Altezza ridotta */
    }
`);
        // User data for persistence
        const userData = { color: 'figuccio' };
        var myColor = GM_getValue(userData.color, "#980000"); // Valore predefinito   (marzo 2025)

        // 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);
        }
 // Funzione per osservare i cambiamenti nel DOM
    function observeDOMChanges() {
    // Creazione di un observer con una funzione di callback
    var observer = new MutationObserver(function(mutationsList, observer) {
        // Per ogni mutazione rilevata, esegui la funzione saveSetting
        for(var mutation of mutationsList) {
            saveSetting();
        }
    });

    // Configurazione dell'observer per osservare cambiamenti nei nodi figlio e nei nodi attributo
    var config = {childList:true, attributes:true, subtree:true};
    // Inizia ad osservare il DOM target
    observer.observe(document.body, config);
}
// Avvia l'osservazione dei cambiamenti nel DOM
observeDOMChanges();

        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.value = e.target.value;

            // 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);
        }

        colorSpan.value = myColor;
        colorInput.value = myColor;


    });
})();