☰

Webpage mask

A customizable mask layer above any webpage. You can use it as a privacy mask, a screensaver, a nightmode filter... and so on.

Автор
PYUDNG
Щоденних встановлень
0
Всього встановлень
28
Рейтинги
0 0 0
Версія
0.2.2
Створено
08.09.2024
Оновлено
30.09.2024
Ліцензія
MIT
Відноситься до
Всі сайти

Webpage mask

What is this

This script adds a mask layer at the top of your webpage, which defaults to a layer of blur effect. When enabled, it can be used to protect the privacy of the page.

Of course, its use is not limited to this. You can use it as a screensaver by simply setting the style to img: image link to set the image you want; you can also use it as a night mode filter by simply setting the style to `css #mask { background-color: rgba(250,249,222,0.1); pointer-events:none; } #mask:not(.show){ display:block; };

Yes, this script uses custom style code to allow you to control the appearance and behavior of the mask layer. If you are familiar with CSS/JavaScript and maybe other technologies, that can be very helpful; however, if you are not a technical expert, you can also simply configure the styles by following the instructions below, or you can use it "out-of-the-box" by just installing it without any configuration.

Style code syntax

The style code is in format of type:value

The type can be:

  1. css: The value will be added as a CSS style to the shadowroot where the mask element is located. CSS is more powerful than you might think, for example, the usage of night mode mentioned above is using CSS, by forcing the mask element to be displayed even in non-enabled state, to show the mask in all time.
  2. img: Full-screen display the image when the mask is enabled, the value is the link to the image.
  3. js: When the mask is created, the value will be executed as JavaScript code. If you're not satisfied with all type above, you can write your own code to customize the mask yourself. The entire script uses a module system similar to that of Node.js, and the custom code executed at runtime will receive a require function, which can call the internal interfaces of the script. Remember to make use of js:debugger to debug your code and explore the execution environment of the your code!