Week2-Blur Bookmarklet


Update: this week I try to figure out the why the blur effect didn't wort, and it truns out the external library sequence is wrong so I changed order of them with Cory's help, and it works now :D  -- Febrary 14



This week's assignment--

Make a bookmarklet that works against the user. It might make links harder to see/click (change color, move them around), remove form elements, put image/div on top of page, etc, make it less informative/useful. Interpret this how you like. It can be a bookmarklet that works generically on (most) sites, or one that is tailored for a specific site.

For this week's assignment, I want to make a bookmarklet to make the website difficult to seen by users. At first I want to make the whole page blur (not specific element but whole page) , so I wrapped whole page in a iframe, clear all the original elements in the body. And then I'd like to use external JS or JQuery blur library to make the whole page in a blur effect.


I tried all the libraries mentioned above, unfortunately, none of them works in this case. (seems like the link of JQuery library didn't work)

I use these lines to add external links in bookmarklet



Then I tried to mess up the style by using the iframe overlay on the original page , and insert a zombie picture in the background (maybe try a gif next time). Some website won't allow iframe for security issue like twitter, git hub, stackoverflow... So this bookmarklet may not works on these websites.