☰

Brightness, Contrast, and Saturation Control

Adjust brightness, contrast, and saturation of a webpage with a draggable and user-friendly UI. Settings persist across page reloads.

当前为 2025-01-23 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Brightness, Contrast, and Saturation Control
// @namespace    http://your.namespace.here/
// @version      1.8
// @description  Adjust brightness, contrast, and saturation of a webpage with a draggable and user-friendly UI. Settings persist across page reloads.
// @author       tae
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    window.addEventListener('load', () => {
        if (document.querySelector('.filter-control-toggle')) return;

        const LOCAL_STORAGE_KEY = 'filter-settings';

        // Load filter values from localStorage
        const loadFilters = () => {
            const settings = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || { brightness: 100, contrast: 100, saturation: 100 };
            return settings;
        };

        // Save filter values to localStorage
        const saveFilters = (settings) => {
            localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(settings));
        };

        let { brightness, contrast, saturation } = loadFilters();

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

        // Create control panel
        const controlPanel = document.createElement('div');
        controlPanel.className = 'filter-control-panel';
        controlPanel.style.cssText = `
            position: fixed;
            top: 50px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 15px;
            z-index: 2147483646;
            border-radius: 10px;
            width: 250px;
            font-family: Arial, sans-serif;
            display: none;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        `;
        document.body.appendChild(controlPanel);

        // Show/hide control panel
        toggleButton.addEventListener('click', () => {
            controlPanel.style.display = controlPanel.style.display === 'none' ? 'block' : 'none';
        });

        // Make control panel draggable
        makeDraggable(controlPanel);

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

            element.addEventListener('mousedown', (event) => {
                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 = `${Math.max(0, initialLeft + deltaX)}px`;
                    element.style.top = `${Math.max(0, initialTop + deltaY)}px`;
                }
            });

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

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

            const label = document.createElement('label');
            label.textContent = `${labelText}: ${defaultValue}`;
            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%';

            // Stop propagation of the mousedown event
            slider.addEventListener('mousedown', (e) => {
                e.stopPropagation();
            });

            slider.oninput = (e) => {
                const value = e.target.value;
                label.textContent = `${labelText}: ${value}`;
                onChange(value);
            };
            container.appendChild(slider);

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

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

        // Create sliders
        createSlider('Brightness', brightness, 50, 150, 1, (value) => {
            brightness = value;
            saveFilters({ brightness, contrast, saturation });
            updateFilters();
        });
        createSlider('Contrast', contrast, 50, 150, 1, (value) => {
            contrast = value;
            saveFilters({ brightness, contrast, saturation });
            updateFilters();
        });
        createSlider('Saturation', saturation, 50, 150, 1, (value) => {
            saturation = value;
            saveFilters({ brightness, contrast, saturation });
            updateFilters();
        });

        // Initialize filters
        updateFilters();
    });
})();