油猴脚本：浏览器护眼模式
本帖最后由 lccccccc 于 2024-4-4 15:26 编辑# 前言
最近晚上浏览论坛，很伤眼睛，就写了这个护眼模式脚本，写得不太好，大佬勿喷。
# 代码
```javascript
// ==UserScript==
// @name 浏览器护眼模式 by: lccccccc
// @version 2024-03-31
// @description适用于Chrome浏览器的护眼模式!
// @author lccccccc https://www.52pojie.cn/home.php?mod=space&uid=2104472
// @match http*://*/*
// @Icon https://down.52pojie.cn/Logo/%E5%90%BE%E7%88%B1%E7%A0%B4%E8%A7%A3.jpg
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @namespace https://www.52pojie.cn/home.php?mod=space&uid=2104472
// ==/UserScript==
var alpha = GM_getValue('alpha');
function setAlpha(){
var _alpha = prompt('输入护眼模式效果值的数字(0.1~0.9), 数字越大, 效果越强: ',alpha);
if (_alpha!=null){
if (isNaN(parseInt(_alpha))){
if(confirm('输入数据有误! 请重新输入! ')){
return setAlpha();
}
return;
}
GM_setValue('alpha',alpha=_alpha);
if (GM_getValue('enabled')==1){
document.getElementById('eyeProtection').backgroundColor = '';
document.getElementById('eyeProtection').style.cssText += `background-color: rgba(255, 200, 150, ${alpha});`;
} else {
alert('设置成功, 需要启用脚本才能看见效果哦! ');
}
}
}
(function() {
'use strict';
if(typeof alpha == "undefined" || typeof alpha == "null"){
alpha=0.3;
}
if(typeof GM_getValue('enabled') == "undefined" || typeof GM_getValue('enabled') == "null"){
GM_setValue('enabled',1);
}
GM_registerMenuCommand(`[${GM_getValue('enabled')==1?'√':'X'}] 启用脚本`, ()=>{
GM_setValue('enabled',1-GM_getValue('enabled'))
if(confirm('刷新立即生效, 是否立即刷新? ')) {
window.location.reload()
}
return;
});
GM_registerMenuCommand("设置护眼模式效果", setAlpha);
if (GM_getValue('enabled')==0){
return;
}
var eyeProtection = document.createElement('div');
eyeProtection.classList.add('eyeProtection');
eyeProtection.id = 'eyeProtection';
eyeProtection.style.zIndex = '32767';
eyeProtection.style.pointerEvents = 'none';
eyeProtection.style.position = 'fixed';
eyeProtection.style.top = '0px';
eyeProtection.style.left = '0px';
eyeProtection.style.width = '100%';
eyeProtection.style.height = '100%';
eyeProtection.style.cssText += `background-color: rgba(255, 200, 150, ${alpha});`;
document.body.appendChild(eyeProtection);
})();
```
# 截图
> 开启前
> 
---
> 开启后
> 
# 如何打开菜单呢？
快速安装脚本 (Greasy Fork)： <https://greasyfork.org/zh-CN/scripts/491293>
# 已知问题
如图，iframe中的内容会重复启用护眼模式
> 图中“验证码”这里属于iframe，论坛登录界面自己去用开发者工具看一下就知道了
说明：只有菜单是：`[√]启用脚本` 才代表启用了本脚本 改变为
0.2
130，100，150
效果可以 magiclyan 发表于 2024-4-4 11:46
这个是采用遮罩还是替换背景？影响页面前端显示吗？
不影响，只是添加了一个显示层级高，并不接受鼠标事件的元素而已 分享我使用的是一款插件
保护眼睛
2.4
阿姆斯特朗回旋喷气式阿姆斯特朗墨镜
ID：fgadnbmmolnmbkbklpaojbogcopipopl 赞！用了，护眼有功，如果直接一个小巧的软件更好。 增加定时 启用吗？能够 传闻中的喜哥哥 发表于 2024-4-4 11:33
增加定时 启用吗？能够
后续会增加，增加了我会在本贴at提醒你，谢谢支持 这个是采用遮罩还是替换背景？影响页面前端显示吗？
lccccccc 发表于 2024-4-4 11:47
不影响，只是添加了一个显示层级高，并不接受鼠标事件的元素而已
ok mark了试试效果 赞！好用感谢分享 请问：说明：只有菜单是：[√]启用脚本 才代表启用了本脚本，这个在哪里？ toceta 发表于 2024-4-4 11:59
请问：说明：只有菜单是：[√]启用脚本 才代表启用了本脚本，这个在哪里？
安装脚本后，点击浏览器拓展的油猴脚本图标