Hack 63. Compose Your Mail in Gmail

Make mailto: links open the Gmail compose page.

The Web comprises many kinds of resources: web pages, newsgroups, IRC channels, FTP sites, and so on. Each kind of resource has a scheme, such as the http: in http://mozilla.org or the irc: in irc://irc.mozilla.org/firefox.

You've probably seen mailto: links on contact pages; when you click the link, it launches an external email program.

But what if you use a web mail service such as Gmail? Normally, getting mailto: links to launch a web-based email application is nontrivial. You would basically need to write an external mail program that switched back to your browser and opened the appropriate URL. What a pain! This hack solves the problem another way, by rewriting mailto: links to point to the Gmail Compose page.

7.5.1. The Code

This user script runs on all pages. From a high-level view, it sounds deceptively simple. Just find all the mailto: links, parse them, and replace them with links to Gmail. When you click the link, the browser just redirects to the Gmail Compose page instead of launching a separate application.

Of course, it's not really that simple. The problem is that mailto: links can be complex. RFC 2368, entitled "The mailto URL scheme," specifies the format. The overall structure is mailto:<recipient>?<querystring>, where <querystring> is a list of <name>=<value> pairs separated by ampersands (&). We want to pass these name/value pairs to Gmail, but, of course, Gmail's Compose page uses a different syntax for encoding them in the URL. So, we need to parse them out and map them individually.

The most important values that we want to transfer to Gmail are the To: and Cc: recipients, the subject line, and the email body. All of these can be encoded in that simple-looking mailto: link! The script parses them out one by one, stores them temporarily, and then uses them to construct the URL of the Gmail Compose page.

One last thing worth mentioning: this script intentionally delays its own processing of the page to take place after the page is loaded, by hooking into the window's onload event. Many sites use JavaScript to write out mailto: links (to protect them from spammers). By the time the onload event fires, the mailto: links should be set up and available to use in the DOM.

Save the following user script as mailto-compose-in-gmail.user.js:

 // ==UserScript== // @name         Mailto Compose In Gmail // @namespace    http://blog.monstuff.com/archives/cat_greasemonkey.html // @description  Rewrites "mailto:" links to Gmail compose links     // @include  * // ==/UserScript== // based on code by Julien Couvreur // and included here with his gracious permission function processMailtoLinks( ) { var xpath = "//a[starts-with(@href,'mailto:')]"; var res = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); var linkIndex, mailtoLink; for (linkIndex = 0; linkIndex < res.snapshotLength; linkIndex++) { mailtoLink = res.snapshotItem(linkIndex); var href = mailtoLink.href; var matches = href.match(/^mailto:([^\?]*)(\?([^?]*))?/); var emailTo, params, emailCC, emailSubject, emailBody; emailTo = matches[1]; params = matches[3]; if (params) { var splitQS = params.split('&'); var paramIndex, param; for (paramIndex = 0; paramIndex < splitQS.length; paramIndex++)  { param = splitQS[paramIndex]; nameValue = param.match(/([^=]+)=(.*)/); if (nameValue && nameValue.length == 3) { switch(nameValue[1]) { case "to": emailTo += "%2C%20" + nameValue[2]; break; case "cc": emailCC = nameValue[2]; break; case "subject": emailSubject = nameValue[2]; break; case "body": emailBody = nameValue[2]; break; } } } } var newUrl = "https://mail.google.com/mail?view=cm&tf=0" + (emailTo ? ("&to=" + emailTo) : "") + (emailCC ? ("&cc=" + emailCC) : "") + (emailSubject ? ("&su=" + emailSubject) : "") + (emailBody ? ("&body=" + emailBody) : ""); mailtoLink.href = newUrl; } } window.addEventListener("load", processMailtoLinks, false); 

7.5.2. Running the Hack

Before installing this script, go to http://blog.monstuff.com and hover your cursor over the link on the left titled "Contact me." You will see a mailto: address in the status bar, as shown in Figure 7-5.

Figure 7-5. A mailto: link

Now, install the script (ToolsInstall This User Script), and refresh the page. Again, hover your cursor over the "Contact me link, and you will see that the URL has been changed to point to Gmail, as shown in Figure 7-6.

Figure 7-6. A "mailto:" link transformed to Gmail

7.5.3. Hacking the Hack

Rewriting mailto: links to regular http: links has one disadvantage. Normally, Firefox lets you right-click on mailto: links and select "Copy email address" from the context menu, but this hack interferes with that feature by turning the mailto: link into something else.

One solution is not to rewrite the link, but attach an onclick event handler. This lets you copy the email address using Firefox's context menu, but you would still redirect to Gmail when you actually click the link.

This works, except for one thing: it won't let you open the Gmail Compose page in a new tab. But we can solve that problem with Greasemonkey, too. One of the new features in Greasemonkey 0.5 is the GM_openInTab function, which does exactly what it sounds like.

In the previous script, replace this line:

 mailtoLink.href = newUrl; 

with this code snippet:

 mailtoLink.addEventListener('click', function(e) { GM_openInTab(newUrl); e.preventDefault(); } 

When you click the link, Greasemonkey will open the Gmail Compose page in a new tab. You can still right-click and select items from the regular mailto: context menu, including "Copy email address."

Julien Couvreur