Customize background color
// ==UserScript==
// @name Website Customizer picker figuccio
// @namespace https://greasyfork.org/users/237458
// @version 0.8
// @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-3.6.0.min.js
// @require https://code.jquery.com/ui/1.13.2/jquery-ui.js
// @icon https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @noframes
// @license MIT
// ==/UserScript==
//Creazione del colorPicker
(function() {
'use strict';
var $ = window.jQuery.noConflict();
//avvia la funzione dopo che la pagina e stata caricata
$(document).ready(function() {
var body = document.body;
var customizer = document.createElement("div");
customizer.id = "controll";
customizer.style = "position:fixed; top:200px; left:200px; z-index:99999;";
body.append(customizer);
const savedPosition = GM_getValue('boxPosition');
if (savedPosition) {
const parsedPosition = JSON.parse(savedPosition);
if (parsedPosition.top <= window.innerHeight && parsedPosition.left <= window.innerWidth) {
$(customizer).css({ top: parsedPosition.top, left: parsedPosition.left });
}
}
function makeDraggableLimited(element) {
element.draggable({
containment: "window",
stop: function(event, ui) {
GM_setValue('boxPosition', JSON.stringify(ui.position));
}
});
}
makeDraggableLimited($(customizer));
function toggleCustomizer() {
customizer.style.display = (customizer.style.display !== 'none' ? 'none' : 'block');
}
GM_registerMenuCommand("Nascondi/Mostra Customizer", toggleCustomizer);
const userdata = { color: 'Background' };
var mycolor = GM_getValue(userdata.color, "#00ff00");
function saveSetting(color) {
GM_setValue(userdata.color, color);
$('body').css("background-color", color);
}
let throttleTimeout;
const observer = new MutationObserver(() => {
if (!throttleTimeout) {
throttleTimeout = setTimeout(() => {
saveSetting(mycolor);
throttleTimeout = null;
}, 200);
}
});
observer.observe(document.body, { childList: true, subtree: true });
GM_addStyle(`
#code { margin-left:1px; 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; }
`);
customizer.innerHTML = `
<div style="padding:10px; background-color:white; border-radius:10px; border:4px solid green; width:180px;">
<div style="display: flex; justify-content: space-between; align-items:center;">
<h3 style="margin: 0; color:blue;">Figuccio-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');
colorinput2.addEventListener('input', function(e) {
mycolor = e.target.value;
code.innerHTML = e.target.value;
saveSetting(mycolor);
});
var closeButton = document.querySelector('#closeButton');
closeButton.addEventListener('click', toggleCustomizer, false);
});
})();