Customize background color
当前为
// ==UserScript==
// @name Website Customizer picker figuccio
// @namespace https://greasyforks.org/users/237458
// @version 0.2
// @description Customize background color
// @author figuccio
// @match *://*/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @require https://code.jquery.com/jquery-1.11.0.min.js
// @require http://code.jquery.com/jquery-latest.js
// @require https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @noframes
// @license MIT
// ==/UserScript==
//Creazione del colorPicker
var $ = window.jQuery;
var j = $.noConflict();
//avvia la funzione dopo che la pagina e stata caricata
$(document).ready(function() {
var body=document.body;
var style="position:fixed; top:200px; left:1100px;z-index:99999;"
var customizer=document.createElement("div");
customizer.id="controll";
customizer.style=style;
j(customizer).draggable();
body.append(customizer);
////////////////////nascondi mostra
function nascondi() {
var customizer = document.getElementById('controll');
customizer.style.display = ((customizer.style.display!='none') ? 'none' : 'block');
}
GM_registerMenuCommand("nascondi/mostra customizer",nascondi);
///////////////////////////funzione chiudi menu da close
function myFunction() {
document.getElementById("controll").style.display = "none";
}
/////////////////////////////////////////////////////////
//dati per la conservazione
var userdata = {color:'Background',}
var mycolor;//dichiarare la variabile colore
//imposta la variabile del colore
if(/^#+\w+$/.test(GM_getValue(userdata.color))){mycolor = GM_getValue(userdata.color);}
else {mycolor="#00ff00";}
////////////////////////////////////////////////////////////
// salvare i dati personalizzati
function saveSetting() {GM_setValue(userdata.color, mycolor);
$('body').css("background-color",mycolor );
// $('div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor );
}
////////////////
//Imposta lo stile CSS degli elementi nel menu
GM_addStyle(`
#code { margin-left:1px; margin-bottom:-19px; color:lime;background-color:brown; border: 2px solid blue; border-radius: 5px;cursor:pointer;}
#colorinput2{margin-left:4px; margin-top:4px; background-color:#3b3b3b; color:red; border:2px solid green; border-radius: 5px;cursor:pointer;}
`);
// Define the customization controls width:170px evita che spostandolo hai lati cambi di dimensioni
customizer.innerHTML= `
<div style="padding:10px; background-color:white; border-radius:10px; border:4px solid green;width:170px;">
<div style="display: flex; justify-content: space-between;align-items:center;">
<h3 style="margin: 0; color:blue;">Background-Color</h3>
<button id="closeButton" style="background-color:red; color:white; border:2px solid blue; border-radius:50%; width:25px; height:25px; cursor:pointer;">X</button>
</div>
<div id="controls" style="display: block;">
<button id="code">${mycolor}</button> <input type="color" list="colors" id="colorinput2" value="${mycolor}">
</div>
</div>
`;
var colorinput2=document.querySelector('#colorinput2');
var code = document.querySelector('#code');
//fa vedere la modifica colore prima di salvarla col tasto Salva
colorinput2.addEventListener('input', function(event){Change(event)},false);
///////////////////////////////////////////////////
//evento della tavolozza dei colori
function Change (e) {
mycolor = e.target.value;
code .innerHTML=e.target.value;
//colore immediatamente visibile
$('body').css("background-color",mycolor );
//$('div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor );
}
// Add the customizer to the document body
document.body.insertAdjacentHTML('beforeend', customizer);
var Close=document.querySelector('#closeButton');
Close.addEventListener('click',myFunction,false);
//})();
/////////
//recupero colore
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
saveSetting();
});
});
observer.observe(document, {childList:true, subtree:true});
})();