网页遮罩层

在网页上方添加一个可以自定义的遮罩层。可以用来遮挡隐私内容,或者用作屏保,又或是用来设置护眼模式... 等等等等

作者
PYUDNG
日安装量
0
总安装量
40
评分
0 0 0
版本
0.4.2
创建于
2024-09-08
更新于
2025-02-11
大小
25.7 KB
许可证
MIT
适用于
所有网站

网页遮罩层

这是什么?

在您的网页上方添加一个遮罩层,默认是一层毛玻璃效果,开启后可以用来保护页面隐私。

当然它的用处不止这个,你把它用作屏保,只需要设置样式为img:图片链接就可以设置你想要的图片;也可以用作夜间护眼模式,只需要设置样式为css:#mask{background-color:rgba(250,249,222,0.1);pointer-events:none;}#mask:not(.show){display:block;};等等

是的,本脚本使用自定义样式代码来允许您控制遮罩层的外观和行为。如果您懂css/javascript等技术这将会相当有用;但如果您并不是技术人员也可以简单通过下面的介绍配置样式,也可以直接“傻瓜式”无需配置开箱即用。

怎么用?

遮罩层会在网页加载时就创建出来,但此时处于关闭状态,会隐藏起来不显示遮罩层;当开启以后就会如字面意思一样显示出来、遮罩在网页上方。

开启/关闭遮罩层可以通过Tampermonkey的菜单手动开关,也可以设置成网页闲置N秒无操作后自动开启遮罩。自动开启遮罩的设置针对每个网站单独配置,互不干扰:比如您在www.bilibili.com开启了自动遮罩功能,就会在www.bilibili.com自动显示遮罩,而不会在www.youtube.com自动显示遮罩,除非您在www.youtube.com也开启了自动遮罩。

开启/关闭遮罩、开启/关闭自动遮罩、自定义样式代码均可以通过Tampermonkey的菜单进行操作。开启了遮罩后,可以通过鼠标点击页面或者按键盘任意键关闭遮罩。

样式代码语法

样式代码总体遵循type:value的结构,其中type可以为以下值:

  1. css: value值将作为CSS样式被添加到mask元素所在的shadowroot里面。css可能比你想象得要更加强大,比如,上面提到的护眼模式用法就是用的css,通过强行在非开启状态也显示mask元素,实现常态化遮罩滤镜。
  2. img: 开启遮罩时全屏展示图片,value值是图片的链接
  3. js: 遮罩被创建时,将value值作为javascript代码执行,可以自己写代码自定义遮罩样式。整个脚本采用了类似nodejs那样的模块系统,自定义代码在执行时会收到一个require函数,可以调用脚本内部的接口。您也可以使用js:debugger来调试您的代码、探索代码执行环境。