如何将过滤器应用于整个网页而不隐藏元素？

Question

我正在制作一个简单的 Firefox Web 扩展，允许用户将过滤器应用于网页。当我尝试通过

document.body.style.filter

应用 CSS 过滤器时，某些元素突然被隐藏（在 YouTube 上单击全屏会隐藏除标题栏之外的所有元素，不知道为什么）。

我已经看过类似的问题并询问了ChatGPT（也提供了类似的解决方案），但它似乎在我的实现中不起作用。我的代码最重要的部分在这里：

// Create a container element
const container = document.createElement("div");
container.style.cssText = `
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
z-index: 9999;`;

// Append the container to the body
document.body.insertAdjacentElement('beforeend', container);

我正在寻找我的代码不起作用的原因，或者如果它一开始就没有任何希望，那么这是一个将过滤器应用到整个页面而没有任何奇怪的工件的好解决方案（我不知道）顺便说一句，不必支持任何旧浏览器）

Answer 1

您将与 CSS 的作者作斗争，因此您的结果可能会有所不同。但以下内容将对页面上的所有元素应用过滤器。星号是通配符。 !important 声明是强制你的风格的一种方式。

尝试：

*{
   filter: blur(5px) !important;
}

---

添加某种类型的屏幕元素然后应用过滤器似乎不起作用。

<div id="screen" style="
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
/* background: black; */
z-index: 999999;
filter: grayscale(50%);
"></div>