Greasy Fork is available in English.
所有网站开启护眼模式
当前为
// ==UserScript==
// @name eye-protection
// @name:zh-CN 护眼模式
// @noframes true
// @namespace https://github.com/jackdizhu
// @version 0.1.0
// @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('#csx-setMenu');
if (oldEditBox) {
oldEditBox.parentNode.removeChild(oldEditBox);
}
$el.style.background = curColor
}
// 保存选项
function saveSetting() {
curColor = document.querySelector('#csx-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('#csx-setMenu');
if (oldEditBox) {
oldEditBox.parentNode.removeChild(oldEditBox);
return;
}
var color = getDbColor();
var odom = document.createElement('div');
odom.id = 'csx-setMenu';
odom.style.cssText = `
position: fixed;
top: 100px;
left: 50px;
padding: 10px;
background: #fff;
border-radius: 4px;
`;
GM_addStyle(`
#csx-setMenuSave,
#csx-setMenureset,
#csx-setMenuClose {
margin: 0;
padding: 0 2px;
border: none;
border-radius: 2px;
cursor: pointer;
background: #fff;
color: #000;
font: 14px/2em "微软雅黑", "Microsoft YaHei";
}
#csx-setMenureset {
border: 1px solid #666;
}
#csx-setMenuSave {
border: 1px solid green;
}
#csx-setMenuClose {
border: 1px solid red;
}
#csx-setMenu {
text-align: left;
font-size: 14px;
z-index: 999999;
border: 1px solid cornflowerblue;
}
#csx-setMenu p {
margin: 5px auto;
}
#csx-setMenu #csx-setMenuTextArea {
border: 1px solid;
padding: 4px;
overflow: auto;
border-radius: 4px;
}
`);
var innerH = `
<p>护眼模式自定义颜色,如：rgb(204, 232, 207) 或者 #cddc39</P>
<textarea id='csx-setMenuTextArea' wrap='off' cols='45' rows='15'>${color}</textarea>
<csxbutton id='csx-setMenuSave'>保存</csxbutton>
<csxbutton id='csx-setMenureset'>重置</csxbutton>
<csxbutton id='csx-setMenuClose' title='如果无法关闭 请刷新界面'>关闭</csxbutton>
`;
odom.innerHTML = innerH;
document.body.appendChild(odom);
document.querySelector('#csx-setMenuSave').addEventListener('click', saveSetting);
document.querySelector('#csx-setMenureset').addEventListener('click', reset);
document.querySelector('#csx-setMenuClose').addEventListener('click', closeMenu);
}
GM_registerMenuCommand('自定义颜色', openMenu); // 设置油猴插件的菜单
document.body.appendChild($el)
})();