油猴脚本：浏览器护眼模式

lccccccc

前言

最近晚上浏览论坛，很伤眼睛，就写了这个护眼模式脚本，写得不太好，大佬勿喷。

代码

// ==UserScript==
// @name         浏览器护眼模式 by: lccccccc [52pojie.cn]
// @version     2024-03-31
// @description  适用于Chrome浏览器的护眼模式!
// @author       lccccccc [52pojie.cn] 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);
})();[/mw_shl_code]

截图

开启前

---

开启后

如何打开菜单呢？

快速安装脚本 (Greasy Fork)： https://greasyfork.org/zh-CN/scripts/491293

已知问题

如图，iframe中的内容会重复启用护眼模式

图中“验证码”这里属于iframe，论坛登录界面自己去用开发者工具看一下就知道了

说明：只有菜单是：[√]启用脚本 才代表启用了本脚本

pfd8838

改变为
0.2
130，100，150
效果可以

lccccccc

magiclyan 发表于 2024-4-4 11:46
这个是采用遮罩还是替换背景？影响页面前端显示吗？

不影响，只是添加了一个显示层级高，并不接受鼠标事件的元素而已

how6

分享我使用的是一款插件

保护眼睛
2.4
阿姆斯特朗回旋喷气式阿姆斯特朗墨镜
ID：fgadnbmmolnmbkbklpaojbogcopipopl

cux666

赞！用了，护眼有功，如果直接一个小巧的软件更好。

传闻中的喜哥哥

增加定时 启用吗？能够

lccccccc

传闻中的喜哥哥 发表于 2024-4-4 11:33
增加定时 启用吗？能够

后续会增加，增加了我会在本贴at提醒你，谢谢支持

magiclyan

这个是采用遮罩还是替换背景？影响页面前端显示吗？

magiclyan

lccccccc 发表于 2024-4-4 11:47
不影响，只是添加了一个显示层级高，并不接受鼠标事件的元素而已

ok mark了试试效果

Wryyy6

赞！好用感谢分享

toceta

请问：说明：只有菜单是：[√]启用脚本 才代表启用了本脚本，这个在哪里？

lccccccc

toceta 发表于 2024-4-4 11:59
请问：说明：只有菜单是：[√]启用脚本 才代表启用了本脚本，这个在哪里？

安装脚本后，点击浏览器拓展的油猴脚本图标