您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Adjust brightness, contrast, and saturation of a webpage
当前为
- // ==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();
- });
- })();