Browsing Designer color picker figuccio

color picker background con memoria

当前为 2022-09-08 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Browsing Designer color picker figuccio
  3. // @namespace https://greasyfork.org/users/237458
  4. // @version 0.4
  5. // @description color picker background con memoria
  6. // @author figuccio
  7. // @match *://*/*
  8. // @icon https://www.flaticon.com/svg/1426/1426846.svg
  9. // @require http://code.jquery.com/jquery-latest.js
  10. // @require https://code.jquery.com/ui/1.12.1/jquery-ui.js
  11. // @grant GM_addStyle
  12. // @grant GM_setValue
  13. // @grant GM_getValue
  14. // @grant GM_registerMenuCommand
  15. // @license MIT
  16. // @noframes
  17. // ==/UserScript==
  18. let $ = window.jQuery;
  19. var j = $.noConflict();
  20. const body=document.body;
  21. let btn_style=`position:fixed;right:10px;bottom:10px;transition:.2s;font-size:15px;box-sizing:border-box;padding:5px;color:black;background:white;border:1px solid lightgrey;border-radius:5px;cursor:pointer;height:fit-content;width:fit-content;z-index:20000000000;font-family: Helvetica Neue”,Helvetica,Arial,sans-serif;`;
  22.  
  23. let box_style=`text-align:right;position:fixed;right:10px;top:10px;width:230px;color:lime!important;height:25px;transition:.6s;border-box;padding:5px;color:black;background:red;border:1px solid lightgrey;border-radius:5px;cursor:default;z-index:200000000000;font-family: Helvetica Neue”,Helvetica,Arial,sans-serif;`;
  24. let box=document.createElement("div");
  25.  
  26. box.innerText="Personalizza";
  27. box.style=btn_style;
  28. let box_state="btn";
  29. j(box).draggable();
  30. body.append(box);
  31.  
  32. //////////////////////////////////////popup pulsante cambia colori al click visibile dal menu mostra nasconde
  33. function myFunctionbox() {
  34. box.style.display = ((box.style.display!='none') ? 'none' : 'block');}
  35. GM_registerMenuCommand("display",myFunctionbox);
  36. //scomparsa automatica pulsante cambia colori dopo 30sec
  37. setTimeout(() => myFunctionbox(), 30000);//30sec
  38. ////////////////////////////////////////////////////////////////////////////
  39. //la finestra si apre da sola dopo sec
  40. setTimeout(function(){document.querySelector("body > div.ui-draggable.ui-draggable-handle").click();}, 3000);
  41. //////////////////////////////////////////////////
  42. box.addEventListener("click",function(){
  43. if(box_state=="btn"){
  44. this.style=box_style;
  45. this.innerText="";
  46. box_state="box";
  47. this.innerHTML=`
  48. color picker
  49. <span id="code">Hex value</span>
  50.  
  51. <input id="random" title="Background-Color" name="bgColor" class="inp-customizer picker" value="#FF0000" type="color" oninput="document.getElementById('code').innerHTML = this.value;">
  52.  
  53.  
  54. </div>
  55.  
  56. </div>
  57. </center>
  58. `;
  59.  
  60. let colorPickers=document.getElementsByClassName("picker");
  61. let randomBtn=document.getElementById("random");
  62.  
  63. for(let i=0;i<colorPickers.length;i++){
  64. colorPickers[i].addEventListener("input", function(){
  65. if(this.name=="bgColor"){
  66. body.style.background=this.value;
  67. GM_setValue('bg',body.style.background );
  68. }
  69. })
  70. }
  71. }
  72. })
  73.  
  74.  
  75. if (GM_getValue('bg') !==null){
  76. document.body.style.backgroundColor=GM_getValue('bg');
  77. }
  78.  
  79.  
  80.