☰

护眼模式

护眼模式，兼容所有网站，自动开启护眼模式，支持自定义颜色

  1. // ==UserScript==
  2. // @name         eye-protection
  3. // @name:zh-CN   护眼模式
  4. // @noframes     true
  5. // @namespace    https://github.com/jackdizhu
  6. // @version      0.2.11
  7. // @description:zh-CN  护眼模式，兼容所有网站，自动开启护眼模式，支持自定义颜色
  8. // @description:en     Eye protection mode, compatible with all websites, automatically open eye protection mode, support custom colors
  9. // @author       jackdizhu
  10. // @match        *
  11. // @include      *
  12. // @grant        GM_getValue
  13. // @grant        GM_setValue
  14. // @grant        GM_addStyle
  15. // @grant        GM_info
  16. // @grant        GM_registerMenuCommand
  17. // @run-at       document-idle
  18. // @description 护眼模式，兼容所有网站，自动开启护眼模式，支持自定义颜色
  19. // ==/UserScript==
  20. // 好评记得收藏一下，哈  If you think this script is good, please bookmark it, thanks!
  21. (function() {
  22.   'use strict';
  23.   function getLang (key) {
  24.     var $lang = navigator.language.toLowerCase().indexOf('zh') !== -1 ? 'zh' : 'en'
  25.     var langObj = {
  26.       'tips-zh': '护眼模式自定义颜色,如：rgb(204, 232, 207) 或者 #cddc39',
  27.       'tips-en': 'Custom color for eye-protection, such as rgb(204, 232, 207) or #cddc39',
  28.       'btn-save-zh': '保存',
  29.       'btn-save-en': 'save',
  30.       'btn-reset-zh': '重置',
  31.       'btn-reset-en': 'reset',
  32.       'btn-close-zh': '关闭',
  33.       'btn-close-en': 'close',
  34.       'btn-close-tips-zh': '如果无法关闭 请刷新界面',
  35.       'btn-close-tips-en': 'If you cannot close, please refresh the interface',
  36.       'btn-add-whitelist-zh': '添加白名单',
  37.       'btn-add-whitelist-en': 'add whitelist',
  38.       'btn-remove-whitelist-zh': '移出白名单',
  39.       'btn-remove-whitelist-en': 'remove whitelist',
  40.       'btn-menu-open-zh': '自定义颜色',
  41.       'btn-menu-open-en': 'custom color',
  42.     }
  43.     return langObj[key + '-' + $lang] || ''
  44.   }
  45.   var dataKey = {
  46.     color: 'eye-protection-color',
  47.     whitelist: 'eye-protection-whitelist'
  48.   }
  49.   var defColor = 'rgb(204, 232, 207)';
  50.   var curColor = defColor;
  51.   var $el = document.createElement('div');
  52.   var inWhitelist = false
  53.   $el.style = `
  54.     position: fixed;
  55.     pointer-events: none;
  56.     width: 100%;
  57.     height: 100%;
  58.     left: 0;
  59.     top: 0;
  60.     background: ${getDbColor()};
  61.     opacity: 0.2;
  62.     z-index: 999999999;
  63.   `;
  64.   // 从数据库取配置数据
  65.   function getDbColor () {
  66.     var color = GM_getValue(dataKey.color) || defColor;
  67.     return color;
  68.   }
  69.   function getWhitelist () {
  70.     var whitelist = GM_getValue(dataKey.whitelist) || '';
  71.     return whitelist;
  72.   }
  73.   function saveWhitelist (data) {
  74.     GM_setValue(dataKey.whitelist, data);
  75.   }
  76.   // 关闭菜单
  77.   function closeMenu() {
  78.     var oldEditBox = document.querySelector('#eye-protection-setMenu');
  79.     if (oldEditBox) {
  80.       oldEditBox.parentNode.removeChild(oldEditBox);
  81.     }
  82.     $el.style.background = curColor
  83.   }
  84.   // 保存选项
  85.   function saveSetting() {
  86.     curColor = document.querySelector('#eye-protection-setMenuTextArea').value;
  87.     curColor = curColor.replace(/(^\s)|(\s$)/, '');
  88.     GM_setValue(dataKey.color, curColor);
  89.     closeMenu();
  90.   }
  91.   // 重置
  92.   function reset() {
  93.     curColor = defColor
  94.     GM_setValue(dataKey.color, curColor);
  95.     closeMenu();
  96.   }
  97.   // 打开菜单
  98.   function openMenu() {
  99.     var oldEditBox = document.querySelector('#eye-protection-setMenu');
  100.     if (oldEditBox) {
  101.       oldEditBox.parentNode.removeChild(oldEditBox);
  102.       return;
  103.     }
  104.     var color = getDbColor();
  105.     var $dom = document.createElement('div');
  106.     $dom.id = 'eye-protection-setMenu';
  107.     $dom.style.cssText = `
  108.         position: fixed;
  109.         top: 100px;
  110.         left: 50px;
  111.         padding: 10px;
  112.         background: #fff;
  113.         border-radius: 4px;
  114.     `;
  115.     GM_addStyle(`
  116.         #eye-protection-setMenu {
  117.           font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
  118.           font-size: 14px;
  119.           z-index: 999999999;
  120.           border: 1px solid #dedede;
  121.         }
  122.         
  123.         #eye-protection-setMenu .button {
  124.           padding: 3px 6px;
  125.           line-height: 16px;
  126.           margin-right: 10px;
  127.           display: inline-block;
  128.           border: 1px solid #999;
  129.           border-radius: 3px;
  130.           display: inline-block;
  131.           cursor: pointer;
  132.         }
  133.         #eye-protection-setMenu p {
  134.           margin: 0;
  135.         }
  136.         #eye-protection-setMenu p + p {
  137.           margin-top: 10px;
  138.         }
  139.         #eye-protection-setMenu textarea {
  140.             border: 1px solid;
  141.             padding: 4px;
  142.             overflow: auto;
  143.             border-radius: 4px;
  144.             margin-bottom: 10px;
  145.             margin-top: 10px;
  146.         }
  147.         #eye-protection-setMenu .input-color span {
  148.           display: inline-block;
  149.           line-height: 28px;
  150.           vertical-align: bottom;
  151.         }
  152.     `);
  153.     var inColor = '#cddc39'
  154.     function getHtml (color) {
  155.       color = color || curColor
  156.       if (/^\#/.test(color)) {
  157.         inColor = color
  158.       }
  159.       return `
  160.         <p>${getLang('tips')}</P>
  161.         <textarea id="eye-protection-setMenuTextArea" wrap='off' cols='45' rows='5' value="${color}">${color}</textarea>
  162.         <p class="input-color">
  163.         <input type="color" id="eye-protection-color-input" value="${inColor}">
  164.         <span>${inColor}</span>
  165.         </p>
  166.         <p>
  167.         <span class="button" id='eye-protection-setMenuSave'>${getLang('btn-save')}</span>
  168.         <span class="button" id='eye-protection-setMenureset'>${getLang('btn-reset')}</span>
  169.         <span class="button" id='eye-protection-setMenuClose' title='${getLang('btn-close-tips')}'>${getLang('btn-close')}</span>
  170.         </p>
  171.         <p>
  172.         ${inWhitelist ?
  173.           '<span class="button" id="eye-protection-removeWhitelist">' + getLang('btn-remove-whitelist') + '</span>' :
  174.           '<span class="button" id="eye-protection-addWhitelist">' + getLang('btn-add-whitelist') + '</span>'
  175.         }
  176.         </p>
  177.         <!--<p>
  178.         <input type="text" id="eye-protection-customInput"/>
  179.         <span class="button" id='eye-protection-customWhitelist'>自定义白名单</span>
  180.         </p>-->
  181.     `;
  182.     }
  183.     
  184.     var innerH = getHtml()
  185.     function colorChange (e) {
  186.       inColor = e.target.value
  187.       $dom.innerHTML = getHtml(inColor);
  188.     }
  189.     $dom.innerHTML = innerH;
  190.     document.body.appendChild($dom);
  191.  
  192.     function eventFn (event, fn, id) {
  193.       if (event.target.id === id) {
  194.         fn(event)
  195.       }
  196.     }
  197.     function addWhitelist (domain) {
  198.       var $whitelist = getWhitelist()
  199.       var str = ',' + domain
  200.       if ($whitelist.indexOf(str) === -1) {
  201.         inWhitelist = true
  202.         saveWhitelist($whitelist + str)
  203.       }
  204.       init()
  205.       closeMenu()
  206.     }
  207.     function removeWhitelist (domain) {
  208.       var $whitelist = getWhitelist()
  209.       var str = ',' + domain
  210.       if ($whitelist.indexOf(str) !== -1) {
  211.         inWhitelist = false
  212.         saveWhitelist($whitelist.replace(str, ''))
  213.       }
  214.       init()
  215.       closeMenu()
  216.     }
  217.  
  218.     $dom.addEventListener('click', function (event) {
  219.       eventFn(event, saveSetting, 'eye-protection-setMenuSave')
  220.     }, false);
  221.     $dom.addEventListener('click', function (event) {
  222.       eventFn(event, reset, 'eye-protection-setMenureset')
  223.     }, false);
  224.     $dom.addEventListener('click', function (event) {
  225.       eventFn(event, closeMenu, 'eye-protection-setMenuClose')
  226.     }, false);
  227.     $dom.addEventListener('change', function (event) {
  228.       eventFn(event, colorChange, 'eye-protection-color-input')
  229.     }, false);
  230.     // 白名单
  231.     $dom.addEventListener('click', function (event) {
  232.       eventFn(event, function () {
  233.         addWhitelist(document.domain)
  234.       }, 'eye-protection-addWhitelist')
  235.     }, false);
  236.     $dom.addEventListener('click', function (event) {
  237.       eventFn(event, function () {
  238.         removeWhitelist(document.domain)
  239.       }, 'eye-protection-removeWhitelist')
  240.     }, false);
  241.   }
  242.   GM_registerMenuCommand(getLang('btn-menu-open'), openMenu); // 设置油猴插件的菜单
  243.  
  244.   function init () {
  245.     var $whitelist = getWhitelist()
  246.     var domain = document.domain
  247.     var tld = '|.com|.xyz|.net|.top|.tech|.org|.gov|.edu|.ink|.int|.mil|.pub|.cn|.com.cn|.net.cn|.gov.cn|.org.cn|.red|.ink|.biz|.cc|.tv|.info|.name|.pro|.museum|.coop|.aero|.mobi|.travel'
  248.     var arr = domain.split('.')
  249.  
  250.     var $tld = ''
  251.     var name = ''
  252.  
  253.     for (let i = arr.length; i > 0; i--) {
  254.       let item = arr[i];
  255.       let _tld = $tld
  256.       if (_tld) {
  257.         _tld = item + '.' + _tld
  258.       } else {
  259.         _tld = '.' + item
  260.       }
  261.       if (tld.indexOf('|' + _tld) !== -1) {
  262.         $tld = _tld
  263.       } else {
  264.         name = arr[i - 1]
  265.         break
  266.       }
  267.     }
  268.     if ($whitelist.indexOf(',' + domain) !== -1 || $whitelist.indexOf(',*.' + name + $tld) !== -1) {
  269.       inWhitelist = true
  270.       $el.style.display = 'none'
  271.       return false
  272.     } else {
  273.       inWhitelist = false
  274.       $el.style.display = 'block'
  275.     }
  276.     document.body.appendChild($el)
  277.   }
  278.   init()
  279. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址