网页遮罩层
这是什么?
在您的网页上方添加一个遮罩层,默认是一层毛玻璃效果,开启后可以用来保护页面隐私。
当然它的用处不止这个,你把它用作屏保,只需要设置样式为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可以为以下值:
css
: value值将作为CSS样式被添加到mask元素所在的shadowroot里面。css可能比你想象得要更加强大,比如,上面提到的护眼模式用法就是用的css,通过强行在非开启状态也显示mask元素,实现常态化遮罩滤镜。
img
: 开启遮罩时全屏展示图片,value值是图片的链接
js
: 遮罩被创建时,将value值作为javascript代码执行,可以自己写代码自定义遮罩样式。整个脚本采用了类似nodejs那样的模块系统,自定义代码在执行时会收到一个require
函数,可以调用脚本内部的接口。您也可以使用js:debugger
来调试您的代码、探索代码执行环境。