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

Question

So, I've created a chrome extension which works like tampermonkey except it uses cookies to store the scripts.

Now, to input code for the cookie, I use a keycombo which opens a prompt, via prompt(). I would like to instead use a custom element to be displayed over a blurred view of the current webpage. I don't want to move any other elements around to do it either.

This is my code so far:

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();
  };
});

Any Ideas?

You can not blur an element, and have any of its descendants unblurred. — CBroe, Sep 30 '16 at 22:31
@wOxxOm The script execution is working, it's just the prompt that gets user input. I want to create a div that floats above the page. The page needs blur and the div needs to be clear, as long as it's present. — I.Q. Stoner, Sep 30 '16 at 22:31
@CBroe Could you blur a rectangle around the div, using 4 other divs? — I.Q. Stoner, Sep 30 '16 at 22:32
Well, you can capture the page as an image, and display it adding blur with CSS or blurring the canvas manually. — wOxxOm, Sep 30 '16 at 22:35
An easier method with `backdrop-filter` CSS in Safari only: [using a div to blur an image behind it?](//stackoverflow.com/q/19687846) — wOxxOm, Sep 30 '16 at 22:41

score 0 · Accepted Answer · edited May 23 '17 at 12:19

0

Edit: Better idea

I know you didn't want insert more elements, but maybe just one? This should work.

Let the Script alter your structure like this:

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

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

And then you blur that new div

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

You will have to enter that one div, but this should do it.

Another Approach suggested by wOxxOm:

Take a screenshot of the page and blur it using CSS filter: blur(5x).

Information on how to take Screenshots with JavaScript can be found here: Using HTML5/Canvas/JavaScript to take screenshots

edited May 23 '17 at 12:19

Community

1
1

answered Sep 30 '16 at 23:47

JHolub

290
3
15

Blurring the div won't blur the other elements underneath it. For that `backdrop-filter` is developed, but it's Safari-only for the time being. – wOxxOm Oct 01 '16 at 00:04
True true. I just remembered that in my project I blurred the image on the server and put the div above it. Sorry I was mistaking that. But I have another idea, I will updated the question. – JHolub Oct 01 '16 at 00:09
Might work, maybe even on majority of the sites but it will break those sites that use CSS rules with `body > something` rules. Or some arcane dependencies on element order. – wOxxOm Oct 01 '16 at 00:20
That is true. If you plan to blur extremely much, the broken CSS might be not too visible, thought. If you blur the body all its child elements will be blurred as well thought. Can't think of anything else at the moment. I'm sorry. – JHolub Oct 01 '16 at 00:32
Well, if you're interested in making your answer more complete, see my comments under the question itself for another approach. – wOxxOm Oct 01 '16 at 01:10

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

1 Answers1

Another Approach suggested by wOxxOm: