Brightness, Contrast, and Saturation Control

Adjust brightness, contrast, and saturation of a webpage

当前为 2024-12-22 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Brightness, Contrast, and Saturation Control
  3. // @namespace http://your.namespace.here/
  4. // @version 1.4
  5. // @description Adjust brightness, contrast, and saturation of a webpage
  6. // @author tae
  7. // @match *://*/*
  8. // @grant none
  9. // @run-at document-end
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. window.addEventListener('load', function() {
  16. if (document.querySelector('.brightness-control-toggle')) return;
  17.  
  18. const toggleButton = document.createElement('button');
  19. toggleButton.textContent = 'Adjust Filters';
  20. toggleButton.className = 'brightness-control-toggle';
  21. toggleButton.style.cssText = `
  22. position: fixed;
  23. top: 10px;
  24. left: 10px;
  25. background-color: #444;
  26. color: white;
  27. border: none;
  28. padding: 5px 10px;
  29. z-index: 2147483647;
  30. border-radius: 5px;
  31. `;
  32. document.body.appendChild(toggleButton);
  33.  
  34. const controlPanel = document.createElement('div');
  35. controlPanel.className = 'brightness-control-panel';
  36. controlPanel.style.cssText = `
  37. position: fixed;
  38. top: 40px;
  39. left: 10px;
  40. background-color: rgba(0, 0, 0, 0.7);
  41. color: white;
  42. padding: 10px;
  43. z-index: 2147483646;
  44. border-radius: 5px;
  45. width: 200px;
  46. font-family: Arial, sans-serif;
  47. display: none;
  48. overflow-y: scroll;
  49. max-height: 300px; /* You can adjust this value */
  50. `;
  51. document.body.appendChild(controlPanel);
  52.  
  53. toggleButton.addEventListener('click', (event) => {
  54. event.stopPropagation();
  55. controlPanel.style.display = controlPanel.style.display === 'none' ? 'block' : 'none';
  56. });
  57.  
  58. function makeDraggable(element) {
  59. let isDragging = false, startX, startY, initialLeft, initialTop;
  60.  
  61. element.addEventListener('mousedown', (event) => {
  62. if (event.target.tagName !== 'INPUT') {
  63. isDragging = true;
  64. startX = event.clientX;
  65. startY = event.clientY;
  66. initialLeft = element.offsetLeft;
  67. initialTop = element.offsetTop;
  68. event.preventDefault();
  69. }
  70. });
  71.  
  72. document.addEventListener('mousemove', (event) => {
  73. if (isDragging) {
  74. const deltaX = event.clientX - startX;
  75. const deltaY = event.clientY - startY;
  76. element.style.left = `${initialLeft + deltaX}px`;
  77. element.style.top = `${initialTop + deltaY}px`;
  78. }
  79. });
  80.  
  81. document.addEventListener('mouseup', () => isDragging = false);
  82. }
  83.  
  84. makeDraggable(controlPanel);
  85.  
  86. const createSlider = (labelText, defaultValue, min, max, step, onChange) => {
  87. const container = document.createElement('div');
  88. container.style.marginBottom = '10px';
  89.  
  90. const label = document.createElement('label');
  91. label.textContent = labelText;
  92. label.style.display = 'block';
  93. label.style.marginBottom = '5px';
  94. container.appendChild(label);
  95.  
  96. const slider = document.createElement('input');
  97. slider.type = 'range';
  98. slider.value = defaultValue;
  99. slider.min = min;
  100. slider.max = max;
  101. slider.step = step;
  102. slider.style.width = '100%';
  103. slider.oninput = onChange;
  104. container.appendChild(slider);
  105.  
  106. controlPanel.appendChild(container);
  107. return slider;
  108. };
  109.  
  110. let brightness = 100, contrast = 100, saturation = 100;
  111.  
  112. const updateFilters = () => {
  113. document.body.style.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%)`;
  114. };
  115.  
  116. createSlider('Brightness', brightness, 50, 150, 1, (e) => { brightness = e.target.value; updateFilters(); });
  117. createSlider('Contrast', contrast, 50, 150, 1, (e) => { contrast = e.target.value; updateFilters(); });
  118. createSlider('Saturation', saturation, 50, 150, 1, (e) => { saturation = e.target.value; updateFilters(); });
  119.  
  120. updateFilters();
  121. });
  122. })();