☰

夜间网页遮罩保护

夜间模式网页遮罩

  1. // ==UserScript==
  2.  
  3. // @name         Eye Protection Overlay Controller
  4.  
  5. // @name:zh-CN  夜间网页遮罩保护
  6.  
  7. // @namespace    http://tampermonkey.net/
  8.  
  9. // @version      1.2
  10.  
  11. // @description  Add a floating button to control the overlay opacity
  12.  
  13. // @description:zh-cn 夜间模式网页遮罩
  14.  
  15. // @author       ation_ciger
  16.  
  17. // @match        *://*/*
  18.  
  19. // @grant        none
  20.  
  21. // @run-at       document-end
  22.  
  23.  
  24.  
  25. // @license MIT
  26.  
  27. // ==/UserScript==
  28.  
  29. (function() {
  30.  
  31.     'use strict';
  32.     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  33.         // 如果是深色主题，显示遮罩
  34.         // 创建遮罩层
  35.  
  36.         var overlay = createOverlay();
  37.  
  38.         // 创建悬浮球
  39.  
  40.         var controlButton = createControlButton(overlay);
  41.  
  42.         // 创建滑块容器
  43.  
  44.         var sliderContainer = createSliderContainer(overlay);
  45.  
  46.         var savedOpacity = localStorage.getItem('overlayOpacity');
  47.  
  48.         if (savedOpacity) {
  49.             overlay.style.backgroundColor = 'rgba(0, 0, 0,' + savedOpacity + ')';
  50.         } else {
  51.             overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 初始透明度
  52.         }
  53.  
  54.     }
  55.  
  56.  
  57.     // 将元素添加到页面
  58.  
  59.     document.body.appendChild(overlay);
  60.  
  61.     document.body.appendChild(controlButton);
  62.  
  63.     document.body.appendChild(sliderContainer);
  64.  
  65.  
  66.  
  67.     // 控制按钮点击事件
  68.  
  69.     controlButton.addEventListener('click', function() {
  70.  
  71.         sliderContainer.style.display = sliderContainer.style.display === 'block' ? 'none' : 'block';
  72.  
  73.     });
  74.  
  75.     // 滑块值改变事件
  76.  
  77.     var slider = sliderContainer.querySelector('input[type="range"]');
  78.  
  79.     slider.value = savedOpacity ? parseFloat(savedOpacity) : 0.5;
  80.  
  81.     slider.addEventListener('input', function() {
  82.  
  83.         overlay.style.backgroundColor = 'rgba(0, 0, 0, ' + slider.value + ')';
  84.  
  85.         localStorage.setItem('overlayOpacity', slider.value);
  86.  
  87.     });
  88.  
  89.     // 辅助函数：创建遮罩层
  90.  
  91.     function createOverlay() {
  92.  
  93.         var div = document.createElement('div');
  94.  
  95.         div.id = 'eye-protection-overlay';
  96.  
  97.         div.style.position = 'fixed';
  98.  
  99.         div.style.top = '0';
  100.  
  101.         div.style.left = '0';
  102.  
  103.         div.style.width = '100%';
  104.  
  105.         div.style.height = '100%';
  106.  
  107.         div.style.zIndex = '9999';
  108.  
  109.         div.style.display = 'block';
  110.  
  111.         div.style.pointerEvents = 'none';
  112.  
  113.         return div;
  114.  
  115.     }
  116.  
  117.     // 辅助函数：创建控制按钮
  118.  
  119.     function createControlButton(overlay) {
  120.  
  121.         var button = document.createElement('button');
  122.  
  123.         button.innerHTML = '灰度';
  124.  
  125.         button.style.position = 'fixed';
  126.  
  127.         button.style.bottom = '20px';
  128.  
  129.         button.style.right = '20px';
  130.  
  131.         button.style.zIndex = '10000';
  132.  
  133.         button.style.padding = '7px';
  134.  
  135.         button.style.borderRadius = '100px';
  136.  
  137.         button.style.backgroundColor = 'gray';
  138.  
  139.         // 可以添加更多样式
  140.  
  141.         return button;
  142.  
  143.     }
  144.  
  145.     // 辅助函数：创建滑块容器
  146.  
  147.     function createSliderContainer(overlay) {
  148.  
  149.         var container = document.createElement('div');
  150.  
  151.         container.id = 'opacity-slider-container';
  152.  
  153.         container.style.position = 'fixed';
  154.  
  155.         container.style.bottom = '60px';
  156.  
  157.         container.style.right = '20px';
  158.  
  159.         container.style.zIndex = '10000';
  160.  
  161.         container.style.padding = '1px';
  162.  
  163.         container.style.backgroundColor = 'gray';
  164.  
  165.         container.style.borderRadius = '10px';
  166.  
  167.         container.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
  168.  
  169.         container.style.display = 'none'; // 默认隐藏
  170.  
  171.         container.innerHTML = `
  172.  
  173.             <div style="padding: 10px; background: gray; border-radius: 5px;">
  174.  
  175.                 <label for="opacity-slider">Overlay Opacity:</label>
  176.  
  177.                 <input type="range" id="opacity-slider" min="0" max="1" step="0.01">
  178.  
  179.             </div>
  180.             <style>#opacity-slider-container{user-select:none;}#opacity-slider{-webkit-appearance:none;width:200px;height:10px;background:#d3d3d3;outline:none;opacity:0.7;transition:opacity .2s;}#opacity-slider:hover{opacity:1;}#opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#4caf50;cursor:pointer;border-radius:50%;}</style>
  181.         `;
  182.  
  183.         return container;
  184.  
  185.     }
  186.  
  187.  
  188. })();