☰

Website Customizer

Customize website font size, background color, and text color

  1. // ==UserScript==
  2. // @name         Website Customizer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2
  5. // @description  Customize website font size, background color, and text color
  6. // @author       Wrldz
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (() => {
  13.     'use strict';
  14.  
  15.     // Define the customization controls
  16.     const customizer = `
  17.         <div style="position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.5);">
  18.             <div style="display: flex; justify-content: space-between; align-items: center;">
  19.                 <h3 style="margin: 0;">Website Customizer</h3>
  20.                 <button id="closeButton" style="background-color: red; color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer;">X</button>
  21.             </div>
  22.             <div id="controls" style="display: block;">
  23.                 <label style="vertical-align: middle;">Font Size: <input type="range" min="12" max="24" value="16" style="margin-left: 5px; vertical-align: middle;" oninput="document.body.style.fontSize = this.value + 'px';"></label>
  24.                 <label style="vertical-align: middle;">Background Color: <input type="color" value="#ffffff" style="margin-left: 5px; vertical-align: middle;" oninput="document.body.style.backgroundColor = this.value;"></label>
  25.                 <label style="vertical-align: middle;">Text Color: <input type="color" value="#000000" style="margin-left: 5px; vertical-align: middle;" oninput="document.body.style.color = this.value;"></label>
  26.             </div>
  27.             <div id="openButtonContainer" style="display: none; margin-top: 10px;">
  28.                 <button id="openButton" style="background-color: green; color: white; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer;">Open</button>
  29.             </div>
  30.         </div>
  31.     `;
  32.  
  33.     // Add the customizer to the document body
  34.     document.body.insertAdjacentHTML('beforeend', customizer);
  35.  
  36.     // Add event listener to the close button
  37.     const closeButton = document.getElementById('closeButton');
  38.     closeButton.addEventListener('click', () => {
  39.         document.getElementById('controls').style.display = 'none';
  40.         document.getElementById('openButtonContainer').style.display = 'block';
  41.     });
  42.  
  43.     // Add event listener to the open button
  44.     const openButton = document.getElementById('openButton');
  45.     openButton.addEventListener('click', () => {
  46.         document.getElementById('openButtonContainer').style.display = 'none';
  47.         document.getElementById('controls').style.display = 'block';
  48.     });
  49. })();