☰

Brightness, Contrast, and Saturation Control

Adjust brightness, contrast, and saturation of a webpage

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

// ==UserScript==
// @name         Brightness, Contrast, and Saturation Control
// @namespace    http://your.namespace.here/
// @version      1.4
// @description  Adjust brightness, contrast, and saturation of a webpage
// @author       tae
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    window.addEventListener('load', function() {
        if (document.querySelector('.brightness-control-toggle')) return;

        const toggleButton = document.createElement('button');
        toggleButton.textContent = 'Adjust Filters';
        toggleButton.className = 'brightness-control-toggle';
        toggleButton.style.cssText = `
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: #444;
            color: white;
            border: none;
            padding: 5px 10px;
            z-index: 2147483647;
            border-radius: 5px;
        `;
        document.body.appendChild(toggleButton);

        const controlPanel = document.createElement('div');
        controlPanel.className = 'brightness-control-panel';
        controlPanel.style.cssText = `
            position: fixed;
            top: 40px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            z-index: 2147483646;
            border-radius: 5px;
            width: 200px;
            font-family: Arial, sans-serif;
            display: none;
            overflow-y: scroll;
            max-height: 300px; /* You can adjust this value */
        `;
        document.body.appendChild(controlPanel);

        toggleButton.addEventListener('click', (event) => {
            event.stopPropagation();
            controlPanel.style.display = controlPanel.style.display === 'none' ? 'block' : 'none';
        });

        function makeDraggable(element) {
            let isDragging = false, startX, startY, initialLeft, initialTop;

            element.addEventListener('mousedown', (event) => {
                if (event.target.tagName !== 'INPUT') {
                    isDragging = true;
                    startX = event.clientX;
                    startY = event.clientY;
                    initialLeft = element.offsetLeft;
                    initialTop = element.offsetTop;
                    event.preventDefault();
                }
            });

            document.addEventListener('mousemove', (event) => {
                if (isDragging) {
                    const deltaX = event.clientX - startX;
                    const deltaY = event.clientY - startY;
                    element.style.left = `${initialLeft + deltaX}px`;
                    element.style.top = `${initialTop + deltaY}px`;
                }
            });

            document.addEventListener('mouseup', () => isDragging = false);
        }

        makeDraggable(controlPanel);

        const createSlider = (labelText, defaultValue, min, max, step, onChange) => {
            const container = document.createElement('div');
            container.style.marginBottom = '10px';

            const label = document.createElement('label');
            label.textContent = labelText;
            label.style.display = 'block';
            label.style.marginBottom = '5px';
            container.appendChild(label);

            const slider = document.createElement('input');
            slider.type = 'range';
            slider.value = defaultValue;
            slider.min = min;
            slider.max = max;
            slider.step = step;
            slider.style.width = '100%';
            slider.oninput = onChange;
            container.appendChild(slider);

            controlPanel.appendChild(container);
            return slider;
        };

        let brightness = 100, contrast = 100, saturation = 100;

        const updateFilters = () => {
            document.body.style.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%)`;
        };

        createSlider('Brightness', brightness, 50, 150, 1, (e) => { brightness = e.target.value; updateFilters(); });
        createSlider('Contrast', contrast, 50, 150, 1, (e) => { contrast = e.target.value; updateFilters(); });
        createSlider('Saturation', saturation, 50, 150, 1, (e) => { saturation = e.target.value; updateFilters(); });

        updateFilters();
    });
})();