油猴护眼模式脚本

最新推荐文章于 2025-03-11 09:15:35 发布

Project Retreat

最新推荐文章于 2025-03-11 09:15:35 发布

阅读量2.8k

点赞数

文章标签： js javascript 脚本语言 web html

本文链接：https://blog.csdn.net/Koweico/article/details/108053054

版权

博主分享了自己利用前端知识制作的一款基于油猴的JS脚本，该脚本提供护眼模式，包含三种预设选项，支持自定义颜色和透明度，通过快捷键操作，还有白名单功能。脚本链接和UI截图均有提供。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近学习了一些前端的知识，就做了一个基于油猴的js脚本练手。

脚本链接：https://greasyfork.org/zh-CN/scripts/408781-%E6%8A%A4%E7%9C%BC%E6%A8%A1%E5%BC%8F-eye-protection-mode

脚本有中英两种语言的界面。
Description：进入护眼模式，自带三种预设，可以保护眼睛、调节亮度，可以自定义模式的颜色和透明度，自己手动调节至满意。菜单快捷键：alt+a；alt+h；alt+p。自带白名单，可封锁域名退出护眼模式。

ui截图：
在这里插入图片描述

效果截图：

部分代码：

// ==UserScript==
// @name         护眼模式/Eye-protection Mode
// @name:en      Eye-protection Mode         
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description:zh-CN  护眼模式，支持自定义颜色和透明度，也可做为亮度调节。
// @description:en  Eye-protection Mode：support customizing color and transparency，also support adjusting brightness.
// @author       196
// @match        *
// @include      *
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @run-at       document-idle
// ==/UserScript==

(function() {
   
    'use strict';
    GM_registerMenuCommand(languageWords('menuopen'), openMenu);    //设置油猴插件的菜单
    var userdata = {
                  //用于存储的数据
        color: '#000000',
        opacity:0.5,
        whitelist: 'mywhitelist'
    }
    var mycolor;                   //声明颜色变量
    var myopacity;                 //声明透明度变量
    var inWhitelist = false;       //声明并初始化白名单判断变量

    //设置颜色变量
    if(/^#+\w+$/.test(GM_getValue(userdata.color))){
   
        mycolor = GM_getValue(userdata.color);
    }
    else {
   
        mycolor="#000000";
    }

    //设置透明度变量
    if(/^0.+\w+$/.test(GM_getValue(userdata.opacity))){
   
        myopacity = GM_getValue(userdata.opacity);
    }
    else if(/^[0-1]$/.test(GM_getValue(userdata.opacity))) {
   
        myopacity = GM_getValue(userdata.opacity);
    }
    else {
   
        myopacity=0.5;
    }

    //初始化效果图层
    var eyeprotectiondiv = document.createElement('div');
    eyeprotectiondiv.style = `
    position: fixed;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: ${
     mycolor};
    opacity:${
     myopacity};
    z-index: 2147483648;
  `;

    //适用于中英两种语言的文本
    function languageWords (keyword) {
   
        var thislanguage = navigator.language.toLowerCase().indexOf('zh') !== -1 ? 'zh' : 'en'
        var languageObj = {
   
            'title-zh': '设置自定义颜色和透明度',
            'title-en': 'Set Your Color and Transparency',
            'defaulttip-zh':'预设：',
            'defaulttip-en':'Default:',
            'defaultblack-zh':'挥墨入夜',
            'defaultblack-en':'Immerse in black',
            'defaultgreen-zh':'浮翠青笠',
            'defaultgreen-en':'Green cape',
            'defaultyellow-zh':'一纸黄粱',
            'defaultyellow-en':'Golden millet ',
            'selectcolortip-zh':'选择目标颜色',
            'selectcolortip-en':'Select color',
            'scrolltip1-zh':'滑动或点击调节透明度：',
            'scrolltip1-en':'Slide/Click to adjust transparency：',
            'scrolltip2-zh':'<-------------------------加强颜色效果--------------------------',
            'scrolltip2-en':'<---------------Enhance  effect of the color-------------------'

最低0.47元/天解锁文章