您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
所有网站开启护眼模式
当前为
- // ==UserScript==
- // @name eye-protection
- // @name:zh-CN 护眼模式
- // @noframes true
- // @namespace https://github.com/jackdizhu
- // @version 0.1.1
- // @description:zh-CN 所有网站开启护眼模式
- // @description:en All websites turn on eye protection mode
- // @author jackdizhu
- // @match *
- // @include *
- // @grant GM_getValue
- // @grant GM_setValue
- // @grant GM_addStyle
- // @grant GM_registerMenuCommand
- // @run-at document-end
- // @description 所有网站开启护眼模式
- // ==/UserScript==
- (function() {
- 'use strict';
- var dataKey = {
- color: 'eye-protection-color'
- }
- var defColor = 'rgb(204, 232, 207)';
- var curColor = defColor;
- var $el = document.createElement('div');
- $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 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;
- }
- #eye-protection-setMenu p {
- margin: 0;
- }
- #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 {
- padding-bottom: 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>护眼模式自定义颜色,如:rgb(204, 232, 207) 或者 #cddc39</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'>保存</span>
- <span class="button" id='eye-protection-setMenureset'>重置</span>
- <span class="button" id='eye-protection-setMenuClose' title='如果无法关闭 请刷新界面'>关闭</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)
- }
- }
- $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);
- }
- GM_registerMenuCommand('自定义颜色', openMenu); // 设置油猴插件的菜单
- document.body.appendChild($el)
- })();