☰

Brightness, Contrast, and Saturation Control

Adjust brightness, contrast, and saturation of a webpage

当前为 2024-12-22 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Brightness, Contrast, and Saturation Control
  3. // @namespace    http://your.namespace.here/
  4. // @version      1.6
  5. // @description  Adjust brightness, contrast, and saturation of a webpage
  6. // @author       tae
  7. // @match        *://*/*
  8. // @grant        none
  9. // @run-at       document-end
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     window.addEventListener('load', function() {
  16.         if (document.querySelector('.brightness-control-toggle')) return;
  17.  
  18.         const toggleButton = document.createElement('button');
  19.         toggleButton.textContent = 'Adjust Filters';
  20.         toggleButton.className = 'brightness-control-toggle';
  21.         toggleButton.style.cssText = `
  22.             position: fixed;
  23.             top: 10px;
  24.             left: 10px;
  25.             background-color: #444;
  26.             color: white;
  27.             border: none;
  28.             padding: 5px 10px;
  29.             z-index: 2147483647;
  30.             border-radius: 5px;
  31.         `;
  32.         document.body.appendChild(toggleButton);
  33.  
  34.         const controlPanel = document.createElement('div');
  35.         controlPanel.className = 'brightness-control-panel';
  36.         controlPanel.style.cssText = `
  37.             position: fixed;
  38.             top: 40px;
  39.             left: 10px;
  40.             background-color: rgba(0, 0, 0, 0.7);
  41.             color: white;
  42.             padding: 10px;
  43.             z-index: 2147483646;
  44.             border-radius: 5px;
  45.             width: 200px;
  46.             font-family: Arial, sans-serif;
  47.             display: none;
  48.             overflow-y: scroll;
  49.             max-height: 300px; /* You can adjust this value */
  50.         `;
  51.         document.body.appendChild(controlPanel);
  52.  
  53.         toggleButton.addEventListener('click', (event) => {
  54.             event.stopPropagation();
  55.             controlPanel.style.display = controlPanel.style.display === 'none' ? 'block' : 'none';
  56.         });
  57.  
  58.         function makeDraggable(element) {
  59.             let isDragging = false, startX, startY, initialLeft, initialTop;
  60.  
  61.             element.addEventListener('mousedown', (event) => {
  62.                 isDragging = true;
  63.                 startX = event.clientX;
  64.                 startY = event.clientY;
  65.                 initialLeft = element.offsetLeft;
  66.                 initialTop = element.offsetTop;
  67.                 event.preventDefault();
  68.             });
  69.  
  70.             document.addEventListener('mousemove', (event) => {
  71.                 if (isDragging) {
  72.                     const deltaX = event.clientX - startX;
  73.                     const deltaY = event.clientY - startY;
  74.                     element.style.left = `${initialLeft + deltaX}px`;
  75.                     element.style.top = `${initialTop + deltaY}px`;
  76.                 }
  77.             });
  78.  
  79.             document.addEventListener('mouseup', () => isDragging = false);
  80.         }
  81.  
  82.         makeDraggable(controlPanel);
  83.  
  84.         const createSlider = (labelText, defaultValue, min, max, step, onChange) => {
  85.             const container = document.createElement('div');
  86.             container.style.marginBottom = '10px';
  87.  
  88.             const label = document.createElement('label');
  89.             label.textContent = labelText;
  90.             label.style.display = 'block';
  91.             label.style.marginBottom = '5px';
  92.             container.appendChild(label);
  93.  
  94.             const slider = document.createElement('input');
  95.             slider.type = 'range';
  96.             slider.value = defaultValue;
  97.             slider.min = min;
  98.             slider.max = max;
  99.             slider.step = step;
  100.             slider.style.width = '100%';
  101.             slider.oninput = onChange;
  102.             container.appendChild(slider);
  103.  
  104.             controlPanel.appendChild(container);
  105.             return slider;
  106.         };
  107.  
  108.         let brightness = 100, contrast = 100, saturation = 100;
  109.  
  110.         const updateFilters = () => {
  111.             document.body.style.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%)`;
  112.         };
  113.  
  114.         createSlider('Brightness', brightness, 50, 150, 1, (e) => { brightness = e.target.value; updateFilters(); });
  115.         createSlider('Contrast', contrast, 50, 150, 1, (e) => { contrast = e.target.value; updateFilters(); });
  116.         createSlider('Saturation', saturation, 50, 150, 1, (e) => { saturation = e.target.value; updateFilters(); });
  117.  
  118.         updateFilters();
  119.     });
  120. })();