🎉 欢迎访问GreasyFork.Org 镜像站!本镜像站由公众号【爱吃馍】搭建,用于分享脚本。联系邮箱📮

Greasy fork 爱吃馍镜像

eye-protection

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

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

🚀 安装遇到问题?关注公众号获取帮助

公众号二维码

扫码关注【爱吃馍】

回复【脚本】获取最新教程和防失联地址

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

🚀 安装遇到问题?关注公众号获取帮助

公众号二维码

扫码关注【爱吃馍】

回复【脚本】获取最新教程和防失联地址

// ==UserScript==
// @name         eye-protection
// @name:zh-CN   护眼模式
// @noframes     true
// @namespace    https://github.com/jackdizhu
// @version      0.2.11
// @description:zh-CN  护眼模式,兼容所有网站,自动开启护眼模式,支持自定义颜色
// @description:en     Eye protection mode, compatible with all websites, automatically open eye protection mode, support custom colors
// @author       jackdizhu
// @match        *
// @include      *
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @grant        GM_info
// @grant        GM_registerMenuCommand
// @run-at       document-idle
// @description 护眼模式,兼容所有网站,自动开启护眼模式,支持自定义颜色
// ==/UserScript==
// 好评记得收藏一下,哈  If you think this script is good, please bookmark it, thanks!
(function() {
  'use strict';
  function getLang (key) {
    var $lang = navigator.language.toLowerCase().indexOf('zh') !== -1 ? 'zh' : 'en'
    var langObj = {
      'tips-zh': '护眼模式自定义颜色,如:rgb(204, 232, 207) 或者 #cddc39',
      'tips-en': 'Custom color for eye-protection, such as rgb(204, 232, 207) or #cddc39',
      'btn-save-zh': '保存',
      'btn-save-en': 'save',
      'btn-reset-zh': '重置',
      'btn-reset-en': 'reset',
      'btn-close-zh': '关闭',
      'btn-close-en': 'close',
      'btn-close-tips-zh': '如果无法关闭 请刷新界面',
      'btn-close-tips-en': 'If you cannot close, please refresh the interface',
      'btn-add-whitelist-zh': '添加白名单',
      'btn-add-whitelist-en': 'add whitelist',
      'btn-remove-whitelist-zh': '移出白名单',
      'btn-remove-whitelist-en': 'remove whitelist',
      'btn-menu-open-zh': '自定义颜色',
      'btn-menu-open-en': 'custom color',
    }
    return langObj[key + '-' + $lang] || ''
  }
  var dataKey = {
    color: 'eye-protection-color',
    whitelist: 'eye-protection-whitelist'
  }
  var defColor = 'rgb(204, 232, 207)';
  var curColor = defColor;
  var $el = document.createElement('div');
  var inWhitelist = false
  $el.style = `
    position: fixed;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: ${getDbColor()};
    opacity: 0.2;
    z-index: 999999999;
  `;
  // 从数据库取配置数据
  function getDbColor () {
    var color = GM_getValue(dataKey.color) || defColor;
    return color;
  }
  function getWhitelist () {
    var whitelist = GM_getValue(dataKey.whitelist) || '';
    return whitelist;
  }
  function saveWhitelist (data) {
    GM_setValue(dataKey.whitelist, data);
  }
  // 关闭菜单
  function closeMenu() {
    var oldEditBox = document.querySelector('#eye-protection-setMenu');
    if (oldEditBox) {
      oldEditBox.parentNode.removeChild(oldEditBox);
    }
    $el.style.background = curColor
  }
  // 保存选项
  function saveSetting() {
    curColor = document.querySelector('#eye-protection-setMenuTextArea').value;
    curColor = curColor.replace(/(^\s)|(\s$)/, '');
    GM_setValue(dataKey.color, curColor);
    closeMenu();
  }
  // 重置
  function reset() {
    curColor = defColor
    GM_setValue(dataKey.color, curColor);
    closeMenu();
  }
  // 打开菜单
  function openMenu() {
    var oldEditBox = document.querySelector('#eye-protection-setMenu');
    if (oldEditBox) {
      oldEditBox.parentNode.removeChild(oldEditBox);
      return;
    }
    var color = getDbColor();
    var $dom = document.createElement('div');
    $dom.id = 'eye-protection-setMenu';
    $dom.style.cssText = `
        position: fixed;
        top: 100px;
        left: 50px;
        padding: 10px;
        background: #fff;
        border-radius: 4px;
    `;
    GM_addStyle(`
        #eye-protection-setMenu {
          font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
          font-size: 14px;
          z-index: 999999999;
          border: 1px solid #dedede;
        }
        
        #eye-protection-setMenu .button {
          padding: 3px 6px;
          line-height: 16px;
          margin-right: 10px;
          display: inline-block;
          border: 1px solid #999;
          border-radius: 3px;
          display: inline-block;
          cursor: pointer;
        }
        #eye-protection-setMenu p {
          margin: 0;
        }
        #eye-protection-setMenu p + p {
          margin-top: 10px;
        }
        #eye-protection-setMenu textarea {
            border: 1px solid;
            padding: 4px;
            overflow: auto;
            border-radius: 4px;
            margin-bottom: 10px;
            margin-top: 10px;
        }
        #eye-protection-setMenu .input-color span {
          display: inline-block;
          line-height: 28px;
          vertical-align: bottom;
        }
    `);
    var inColor = '#cddc39'
    function getHtml (color) {
      color = color || curColor
      if (/^\#/.test(color)) {
        inColor = color
      }
      return `
        <p>${getLang('tips')}</P>
        <textarea id="eye-protection-setMenuTextArea" wrap='off' cols='45' rows='5' value="${color}">${color}</textarea>
        <p class="input-color">
        <input type="color" id="eye-protection-color-input" value="${inColor}">
        <span>${inColor}</span>
        </p>
        <p>
        <span class="button" id='eye-protection-setMenuSave'>${getLang('btn-save')}</span>
        <span class="button" id='eye-protection-setMenureset'>${getLang('btn-reset')}</span>
        <span class="button" id='eye-protection-setMenuClose' title='${getLang('btn-close-tips')}'>${getLang('btn-close')}</span>
        </p>
        <p>
        ${inWhitelist ?
          '<span class="button" id="eye-protection-removeWhitelist">' + getLang('btn-remove-whitelist') + '</span>' :
          '<span class="button" id="eye-protection-addWhitelist">' + getLang('btn-add-whitelist') + '</span>'
        }
        </p>
        <!--<p>
        <input type="text" id="eye-protection-customInput"/>
        <span class="button" id='eye-protection-customWhitelist'>自定义白名单</span>
        </p>-->
    `;
    }
    
    var innerH = getHtml()
    function colorChange (e) {
      inColor = e.target.value
      $dom.innerHTML = getHtml(inColor);
    }
    $dom.innerHTML = innerH;
    document.body.appendChild($dom);

    function eventFn (event, fn, id) {
      if (event.target.id === id) {
        fn(event)
      }
    }
    function addWhitelist (domain) {
      var $whitelist = getWhitelist()
      var str = ',' + domain
      if ($whitelist.indexOf(str) === -1) {
        inWhitelist = true
        saveWhitelist($whitelist + str)
      }
      init()
      closeMenu()
    }
    function removeWhitelist (domain) {
      var $whitelist = getWhitelist()
      var str = ',' + domain
      if ($whitelist.indexOf(str) !== -1) {
        inWhitelist = false
        saveWhitelist($whitelist.replace(str, ''))
      }
      init()
      closeMenu()
    }

    $dom.addEventListener('click', function (event) {
      eventFn(event, saveSetting, 'eye-protection-setMenuSave')
    }, false);
    $dom.addEventListener('click', function (event) {
      eventFn(event, reset, 'eye-protection-setMenureset')
    }, false);
    $dom.addEventListener('click', function (event) {
      eventFn(event, closeMenu, 'eye-protection-setMenuClose')
    }, false);
    $dom.addEventListener('change', function (event) {
      eventFn(event, colorChange, 'eye-protection-color-input')
    }, false);
    // 白名单
    $dom.addEventListener('click', function (event) {
      eventFn(event, function () {
        addWhitelist(document.domain)
      }, 'eye-protection-addWhitelist')
    }, false);
    $dom.addEventListener('click', function (event) {
      eventFn(event, function () {
        removeWhitelist(document.domain)
      }, 'eye-protection-removeWhitelist')
    }, false);
  }
  GM_registerMenuCommand(getLang('btn-menu-open'), openMenu); // 设置油猴插件的菜单

  function init () {
    var $whitelist = getWhitelist()
    var domain = document.domain
    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'
    var arr = domain.split('.')

    var $tld = ''
    var name = ''

    for (let i = arr.length; i > 0; i--) {
      let item = arr[i];
      let _tld = $tld
      if (_tld) {
        _tld = item + '.' + _tld
      } else {
        _tld = '.' + item
      }
      if (tld.indexOf('|' + _tld) !== -1) {
        $tld = _tld
      } else {
        name = arr[i - 1]
        break
      }
    }
    if ($whitelist.indexOf(',' + domain) !== -1 || $whitelist.indexOf(',*.' + name + $tld) !== -1) {
      inWhitelist = true
      $el.style.display = 'none'
      return false
    } else {
      inWhitelist = false
      $el.style.display = 'block'
    }
    document.body.appendChild($el)
  }
  init()
})();