An Improved "Gmail This" Bookmarket

I was talking to my non-programmer brother and he was asking me whether there was a way to click one button to email someone something you are reading online (read: killer application idea). My answer was, "surely" and "it must exist" because it is such a trivial thing to implement with bookmarklets. "I could probably do it right now while we are on the phone." And so I did ...

I first did a quick search for "gmail bookmarklet" and the first thing that came up was Add a "Gmail This" Bookmarklet to Your Browser from About.com (via this Life Hacker post), the source code of which is reproduced below:

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

The user of this bookmarklet, assuming she is new to such things, will likely be pleased for about 15 minutes. But then she will quickly realize that it doesn't do what she wants it to do. Namely, she wants to select a portion of the page she is reading and include that in the email along with a link to the page. The original version from About.com does not do that - it just includes the link of the page, not the highlighted text.

Still on the phone and frustrated by this, I then 1) quickly tried and failed to find another Gmail bookmarklet that has my feature, and 2) decided to write one using the best copy-and-paste techniques known to man.

The first task is to get the text the user has selected on the webpage. So, how do you do that in JavaScript? Who cares! I searched for a snippet and found the following one on DZone Snippets, reproduced below:

function getSel(){
var w=window,d=document,gS='getSelection';
return (''+(w[gS]?w[gS]():d[gS]?d[gS]():d.selection.createRange().text)).replace(/(^\s+|\s+$)/g,'');
}

I then integrated that, slightly modified, into the original bookmarklet, as shown below:

javascript:(function(){var w=window,d=document,gS='getSelection';var s=(''+(w[gS]?w[gS]():d[gS]?d[gS]():d.selection.createRange().text)).replace(/(^\s+|\s+$)/g,'');m='http://mail.google.com/mail/?view=cm&fs=1&tf=1&to=&su='+encodeURIComponent(document.title)+'&body='+encodeURIComponent(document.location+'\n\n'+s);w=window.open(m,'addwindow','status=no,toolbar=no,width=575,height=545,resizable=yes');setTimeout(function(){w.focus();},%20250);})();
// improved ^

And that's it! Now there is a new and improved Gmail This bookmarklet (right-click the link and add it to your favorites or drag the link to your toolbar to install it).

Coda

You might have guessed that this blog post is not really about bookmarklets. Like all great works of literature, it is about the meaning of life.

This blog post is about the "scratching an itch" principle that makes free and open source software (F/OSS) so desirable and powerful. When the source is available, hackers, that is, superheroes with the power to manipulate the source - hackers like me, and others way more powerful - modify it to satisfy their needs, improving the original software. And they share those changes with whosoever wants them. The user community tends to choose the most useful variants of the software, enabling a kind of "evolution by user selection". Why do the hacker-gods do this? You might as well ask Superman why he does what he does. And in case you haven't figured it out yet, that is the meaning of life.

Now if I can only explain to my brother how to install bookmarklets ... users ... sigh ...