护眼模式，兼容所有网站，自动开启护眼模式，支持自定义颜色
当前为
// ==UserScript==
// @name eye-protection
// @name:zh-CN 护眼模式
// @noframes true
// @namespace https://github.com/jackdizhu
// @version 0.1.6
// @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_registerMenuCommand
// @run-at document-end
// @description 护眼模式，兼容所有网站，自动开启护眼模式，支持自定义颜色
// ==/UserScript==
// 好评记得收藏一下，哈 If you think this script is good, please bookmark it, thanks!
(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)
})();