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
jscript=document.createElement('script');
jscript.type='text/javascript';
jscript.src='//code.jquery.com/jquery-1.8.1.min.js';
script=document.createElement('script');
script.type='text/javascript';
script.src='http://gianlucaguarini.github.io/Vague.js/Vague.js';
//script.src='//nbartlomiej.github.io/foggy/jquery.foggy.min.js';
document.getElementsByTagName('head')[0].appendChild(jscript);
document.getElementsByTagName('head')[0].appendChild(script);
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.
