Brightness, Contrast, and Saturation Control

Adjust brightness, contrast, and saturation of a webpage
当前为 2024-12-20 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Brightness, Contrast, and Saturation Control
// @namespace    http://your.namespace.here/
// @version      1.2
// @description  Adjust brightness, contrast, and saturation of a webpage
// @author       tae
// @License      MIT
// @match        *://*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

window.addEventListener('load', function() {
    'use strict';

    // Create a button to expand/collapse the control panel
    const toggleButton = document.createElement('button');
    toggleButton.textContent = 'Adjust Filters';
    toggleButton.style.position = 'fixed';
    toggleButton.style.top = '10px';
    toggleButton.style.left = '10px';
    toggleButton.style.backgroundColor = '#444';
    toggleButton.style.color = 'white';
    toggleButton.style.border = 'none';
    toggleButton.style.padding = '5px 10px';
    toggleButton.style.zIndex = '10001';
    toggleButton.style.borderRadius = '5px';
    document.body.appendChild(toggleButton);

    // Create a control panel
    const controlPanel = document.createElement('div');
    controlPanel.style.position = 'fixed';
    controlPanel.style.top = '40px';
    controlPanel.style.left = '10px';
    controlPanel.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    controlPanel.style.color = 'white';
    controlPanel.style.padding = '10px';
    controlPanel.style.zIndex = '10000';
    controlPanel.style.borderRadius = '5px';
    controlPanel.style.width = '200px';
    controlPanel.style.fontFamily = 'Arial, sans-serif';
    controlPanel.style.cursor = 'move';
    controlPanel.style.display = 'none'; // Start hidden
    document.body.appendChild(controlPanel);

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

    // Function to make the control panel draggable
    function makeDraggable(element) {
        let isDragging = false;
        let startX, startY, initialLeft, initialTop;

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

        const handleMouseMove = (event) => {
            if (isDragging) {
                const currentX = event.clientX;
                const currentY = event.clientY;
                const deltaX = currentX - startX;
                const deltaY = currentY - startY;
                element.style.left = `${initialLeft + deltaX}px`;
                element.style.top = `${initialTop + deltaY}px`;
            }
        };

        const handleMouseUp = () => {
            isDragging = false;
        };

        element.addEventListener('mousedown', handleMouseDown);
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
    }

    makeDraggable(controlPanel);

    // Create sliders for brightness, contrast, and saturation
    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;
    let contrast = 100;
    let 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();
});