对body元素及其内容进行模糊处理，然后在顶部显示未模糊的元素

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

本文关键字：模糊 元素 然后 显示 处理 顶部 body      更新时间：2023-09-26

所以，我已经创建了一个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();
  };
});

任何想法?

编辑:更好的主意

我知道你不想插入更多的元素，但也许只是一个?这应该可以工作。

让脚本这样修改你的结构:

<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截图的信息可以在这里找到:使用HTML5/Canvas/JavaScript截图

相关文章：