Greasy Fork is available in English.

new picker barra Facebook figuccio

color picker all'interno della barra di Facebook

  1. // ==UserScript==
  2. // @name new picker barra Facebook figuccio
  3. // @namespace https://greasyfork.org/users/237458
  4. // @version 1.4
  5. // @author figuccio
  6. // @description color picker all'interno della barra di Facebook
  7. // @match https://*.facebook.com/*
  8. // @grant GM_addStyle
  9. // @grant GM_setValue
  10. // @grant GM_getValue
  11. // @grant GM_registerMenuCommand
  12. // @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
  13. // @run-at document-start
  14. // @icon https://facebook.com/favicon.ico
  15. // @require https://greasyfork.org/scripts/12228/code/setMutationHandler.js
  16. // @noframes
  17. // @license MIT
  18. // ==/UserScript==
  19. (function() {
  20. 'use strict';
  21. var $ = window.jQuery;
  22. $(document).ready(function() {
  23. var body = document.getElementsByTagName("body")[0];
  24. var container = document.createElement("div");
  25. //container.style="top:1px;position:fixed;right:330px;"
  26. body.append(container);
  27. container.innerHTML = `
  28. <input type="button" id="colorspan" title="Hex color">${myColor}</button> Color<input type="color" list="colors" id="colorinput" value="${myColor}" title="Color picker">
  29. `;
  30.  
  31. // Set the CSS style of menu elements
  32. GM_addStyle(`
  33. #colorspan { z-index:999999999999;position:fixed;top:13px;right:425px;color:darkred;border:2px solid green;border-radius:6px;cursor:pointer;}
  34. #colorinput { z-index:999999999999;position:fixed;top:10px;right:330px;border:2px solid yellow;border-radius:6px;cursor:pointer;}
  35. `);
  36.  
  37. // User data for persistence
  38. var userData = { color: 'figuccio' };
  39. var myColor = /^#+\w+$/.test(GM_getValue(userData.color)) ? GM_getValue(userData.color) : "#980000";
  40.  
  41. // Save custom data
  42. function saveSetting() {
  43. GM_setValue(userData.color, myColor);
  44. $('div[role="banner"]+div div[role="navigation"], div[role="complementary"], div[aria-label="Facebook"][role="navigation"]').css("background-color", myColor);
  45. }
  46.  
  47. var colorInput = document.querySelector('#colorinput');
  48. var colorSpan = document.querySelector('#colorspan');
  49.  
  50. // Color picker event
  51. colorInput.addEventListener('input', function(event) {
  52. colorChange(event);
  53. }, false);
  54.  
  55. $('div[role="banner"]+div div[role="navigation"], div[role="complementary"], div[aria-label="Facebook"][role="navigation"]').css("background-color", myColor);
  56.  
  57. // Color change function
  58. function colorChange(e) {
  59. myColor = e.target.value;
  60. colorSpan.innerHTML = e.target.value;
  61. document.getElementById('colorspan').value = myColor;
  62.  
  63. // Update color immediately visible
  64. $('div[role="banner"]+div div[role="navigation"], div[role="complementary"], div[aria-label="Facebook"][role="navigation"]').css("background-color", myColor);
  65. GM_setValue(userData.color, myColor);
  66. }
  67.  
  68. document.getElementById('colorspan').value = myColor;
  69. document.getElementById('colorinput').value = myColor;
  70.  
  71. saveSetting(); // Save
  72. window.setTimeout(saveSetting, 3000); // Wait 3 seconds and resave the color
  73. });
  74. })();
  75.  
  76.