Adjust brightness, contrast, and saturation of a webpage with a draggable and user-friendly UI. Settings persist across page reloads.
目前為
// ==UserScript==
// @name Brightness, Contrast, and Saturation Control
// @namespace http://your.namespace.here/
// @version 1.9
// @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();
});
})();