模糊 body 元素及其内容，然后在顶部显示一个未模糊的元素

Question

所以，我创建了一个 chrome 扩展，它的工作方式类似于 tampermonkey，只是它使用 cookie 来存储脚本。

现在，为了输入 cookie 的代码，我使用了通过 prompt() 打开提示的组合键。我想改为使用自定义元素显示在当前网页的模糊视图上。我也不想移动任何其他元素来做到这一点。

到目前为止，这是我的代码：

a = String(decodeURIComponent(document.cookie.split("@=")[1].split(";")[0]));
b = new Date().getFullYear(); b = new Date().toGMTString().replace(b, ++b);
c = document.createElement("script"); d = document.head;

a[0] == "@" ? c.src = a.substr(1) : c.innerText = a;
d.insertBefore(c, d.firstChild);

addEventListener("keypress", function (i)
{
  if (i.which == 81 && i.shiftKey == true)
  {
    e = encodeURIComponent(prompt("Usage: Link - @[URL] | Script - [Raw JS]"));
    document.cookie = "@=" + e + "; expires=" + b; location.reload();
  };
});

有什么想法吗？

Answer 1

编辑：更好的主意

我知道您不想插入更多元素，但也许只是一个？这应该有效。

让脚本像这样改变您的结构：

<html>
<body>
    <div id="blur">
    // original page content
    </div>

    <div id="floatingModal">
    // your content
    </div>
</body>
</html>

然后你模糊了新的 div

div#blur{
    filter: blur(5px);
}

您将必须输入那个 div，但这应该可以了。

wOxxOm 建议的另一种方法：

截取页面的屏幕截图并使用 CSS filter: blur(5x).

对其进行模糊处理

有关如何使用 JavaScript 截屏的信息可在此处找到：Using HTML5/Canvas/JavaScript to take screenshots

模糊 body 元素及其内容，然后在顶部显示一个未模糊的元素

Blur the body element and its contents, then show an unblurred element over top

javascript

prompt

tampermonkey

wOxxOm 建议的另一种方法：