Aug 272011
 

The idea of bookmarklets is so simple that I suspect many people use them without realizing it. A bookmarklet is basically just a specially-crafted bookmark for your browser which performs special tasks. This can mean performing custom actions on the current page or generally improving your web browsing experience.

Technically, bookmarklets are short snippets of Javascript code which can do just about anything. They’ve been around for a long time, but I’ve only been using them a few years. With the increasing prevalence of cloud products and services, I expect their usage will only increase. Bookmarklets make it easier for you to do everything you need to with just a web browser. As such, I’m keeping a list of the most useful.

To use any of these bookmarklets yourself, all you need to do is create a new bookmark. Instead of putting a web address into the bookmark, copy and paste the bit of code. Then, click on them as you would any other bookmark.

GMailThis!

GMailThis! allows you to send the address of the current web page via GMail. It’s extremely convenient for sharing your finds with others. Optionally, highlight a section of text from the page before clicking GMailThis! and the selection will be automatically copied into your e-mail.

javascript:(function(){m='http://mail.google.com/mail/?view=cm&fs=1&tf=1&to=&su='+encodeURIComponent(document.title)+'&body='+encodeURIComponent(document.location);w=window.open(m,'addwindow','status=no,toolbar=no,width=575,height=545,resizable=yes');setTimeout(function(){w.focus();},%20250);})();"

See the original at Contrapants.

GMail Compose

GMail Compose is similar to GMailThis! but simply opens up a blank e-mail composition window.

javascript:var%20w=window,u='https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1',l=document.location;try{%20throw(0);%20}%20catch(z)%20{a%20=function(){if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=600,height=500'))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}void(0)"

See the original at Hackaddict.

Note in Reader

If you use Google Reader for your RSS feeds, then this allows you to Share and optionally make notes on the current page. I find this convenient because I include a list of my shared items on the front page of 6by9.net.

javascript:var%20b=document.body;var%20GR________bookmarklet_domain='http://www.google.com';if(b&&!document.xmlVersion){void(z=document.createElement('script'));void(z.src='http://www.google.com/reader/ui/link-bookmarklet.js');void(b.appendChild(z));}else{}

This is available directly from Google.

Re-coloring Web Page for Legibility

There are a lot of ugly web pages in existence. Some of them are almost impossible to read. In other cases, it’s just easier to read them if the background is more plain. I’ve come across and customized a few versions of this.

DarkenPage makes the current page background black and the text white.

javascript: (function(){ var newSS, styles='* { background: black ! important; color: white !important } :link, :link * { color: #CCFF33 !important } :visited, :visited * { color: #551A8B !important }'; if(document.createStyleSheet) { document.createStyleSheet('javascript:\''+styles+'\''); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName('head')[0].appendChild(newSS); } } )();

This was created based on a Google support forum post.

LightenPage makes the current page background white and the text black.

javascript: (function(){ var newSS, styles='* { background: white ! important; color: black !important } :link, :link * { color: #0000EE !important } :visited, :visited * { color: #551A8B !important }'; if(document.createStyleSheet) { document.createStyleSheet('javascript:\''+styles+'\''); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName('head')[0].appendChild(newSS); } } )();

I found this on ChromePlugins.

InvertPageColors attempts to invert all the colors on the current page, including all the images. It is quite a bit buggier than the above two options, but cool when it works.

function invertColors(){$("body").find("*").andSelf().each(function(){var a=["color","background-color"];for(var b in a){b=a[b];console.log(b,$(this),$(this).data(b),$(this).css(b));$(this).data(b,$(this).css(b))}});$("body").find("*").andSelf().each(invertElement);$("iframe").each(function(){$(this).contents().find("*").each(invertElement)})}function invertElement(){var a=["color","background-color"];var b=null;for(var c in a){c=a[c];if(!$(this).css(c))continue;if($(this).data(c)!=$(this).css(c))continue;b=new RGBColor($(this).css(c));if(b.ok){$(this).css(c,"rgb("+(255-b.r)+","+(255-b.g)+","+(255-b.b)+")")}b=null}}javascript:function load_script(a,b){var c=document.createElement("script");c.src=a;c.onload=b;document.getElementsByTagName("head")[0].appendChild(c)}load_script("http://www.phpied.com/files/rgbcolor/rgbcolor.js",function(){if(!window.jQuery)load_script("https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js",invertColors);else invertColors();load_script("http://www.6by9.net/z/projects/pageInvert/pixastic.invert.js",function(){$("img").each(function(){try{$(this).pixastic("invert")}catch(a){}})})});

I took the original snippet from StackOverflow and added image inverting with the Pixastic javascript image-modification library.

Asteroids

Play asteroids in your web browser and blow away the current page!

javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0);

See the original on Erik’s github.

Katamari Hack

Turn the current page into a game of Katamari Damacy.

javascript:var%20i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

See the original on Kathack.

  4 Responses to “Bookmarklets – Making the Web More Convenient and Fun”

Comments (4)
  1. Google Reader is no more – Use Google+

    For those users who have transitioned from Google Reader to Google+, you should now use one of these bookmarklets to share or +1 items on Google+:

    http://plus1.atspace.co.uk/bookmarklets.htm

    I should mention that transitioning was awful. I spent a whole afternoon sifting through my Google Reader Shared Items feed and re-sharing on Google+.

  2. I couldn’t get your invert to work. These two work quite well in chrome but I haven’t tested them in other browsers.

    Inverts most pages but doesn’t invert images (useful when you want to see the original image colors):
    javascript: var c = [{ r: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, p: function (b) { return [parseInt(b[1]), parseInt(b[2]), parseInt(b[3])] } }, { r: /^(\w{2})(\w{2})(\w{2})$/, p: function (b) { return [parseInt(b[1], 16), parseInt(b[2], 16), parseInt(b[3], 16)] } }, { r: /^(\w{1})(\w{1})(\w{1})$/, p: function (b) { return [parseInt(b[1] + b[1], 16), parseInt(b[2] + b[2], 16), parseInt(b[3] + b[3], 16)] } }]; function w(b) { this.ok = !1; "#" == b.charAt(0) && (b = b.substr(1, 6)); b = b.replace(/ /g, "").toLowerCase(); for (a = 0; a this.r || isNaN(this.r) ? 0 : 255 this.g || isNaN(this.g) ? 0 : 255 this.b || isNaN(this.b) ? 0 : 255 < this.b ? 255 : this.b } function y() { var b = ["color", "background-color"]; $($("*").get().reverse()).each(function () { var d = null, e; for (e in b) e = b[e], $(this).css(e) && (d = new w($(this).css(e)), d.ok && $(this).css(e, "rgb(" + (255 - d.r) + "," + (255 - d.g) + "," + (255 - d.b) + ")")) }) } function z(b, d) { var e = document.createElement("script"); e.src = b; e.onload = d; document.getElementsByTagName("head")[0].appendChild(e) } window.jQuery ? y() : z("https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js", y);

    Inverts the entire page:
    javascript:(function(){var css='html {-webkit-filter: invert(100%);'+'-moz-filter: invert(100%);'+'-o-filter: invert(100%);'+'-ms-filter: invert(100%); }',head=document.getElementsByTagName('head')[0],style=document.createElement('style');if(!window.counter){window.counter=1;}else{window.counter++;if(window.counter%2==0){var css='html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'}};style.type='text/css';if(style.styleSheet){style.styleSheet.cssText=css;}else{style.appendChild(document.createTextNode(css));}head.appendChild(style);})();

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(to be displayed above your comment)

(for moderation; your e-mail address will not be made public)