A Quick Tutorial on JavaScript Bookmarklets

A Quick Tutorial on JavaScript Bookmarklets
by MATT CUTTS on AUGUST 4, 2008
in HOW TO, WEB/NET
Bookmarklets are very handy pieces of JavaScript code that you can bookmark. In HTML, if you want a link to open in a new window, you’d write it like this:

<a href=”https://www.mattcutts.com/blog/” target=”_blank”>Matt Cutts</a>

Go on, try it on this link: Matt Cutts

If you wanted to create a bookmarklet to open a new window or tab, you’d do it like this:

javascript:(function(){ window.open(‘http://www.cnn.com/’); })();

so the actual bookmarklet link that would appear in your HTML as

<a href=”javascript:(function(){ window.open(‘http://www.cnn.com/’); })();”>CNN</a>

and if you want to play with it, here’s the trivial CNN example bookmarklet. On Firefox, you can drag the bookmarklet to your bookmarks bar. On Internet Explorer, you can right-click and select “Add to Favorites…”.

The reason I mention this is that bit.ly is a url shortening service that I like, and they have a bookmarklet, but it replaces the page that you’re shortening. Their bookmarklet looks like this:

javascript:location.href=’http://bit.ly/?url=’+encodeURIComponent(location.href)

So suppose you find a new page that you want to twitter about or shorten the url for some reason. You want a bookmarklet that opens the bit.ly url in a new window or tab instead of replacing the current page. Combining the two bookmarkets, you’d get

javascript:(function(){ window.open(‘http://bit.ly/?url=’+encodeURIComponent(location.href)); })();

and here is a bookmarklet for bit.ly that opens your bit.ly url in a new window or tab. You can just drag the bookmarklet to your bookmarks folder.

That’s enough to get you started with bookmarklets, but you can find more info about bookmarklets by searching or by looking at example bookmarklets around the web. For example, industrial-strength bookmarklets often load JavaScript dynamically from a webserver. That way if you want to upgrade or improve the functionality of the bookmarklet, you can change the code on the webserver instead of asking every user to update their bookmark. On the other end of the spectrum, some quick-and-dirty bookmarklets don’t even bother escaping the url.

I want to open a new tab, not a new window!

Some webmasters want to choose between a link opening a new tab vs. a new window. I believe that you don’t get that choice — it’s up to the user and their web browser. For example, in Firefox a user can select their desired behavior under Tools → Options → Tabs → “New pages should be opened in:” and choose “a new tab”. Or to tweak the setting directly, the user can type “about:config” into the location bar/address bar and then modify the “browser.link.open_newwindow” option to be one of the following values:

1 = open new windows in the existing window
2 = open new windows in a new window
3 = open new windows in a new tab (this is the default in Firefox 2 and Firefox 3)

See this about:config page for more info.

Likewise in Internet Explorer, the user can go into Tools → Internet Options → “Settings” button in the Tabs section and then under “When a pop-up is encountered:” choose “Always open pop-ups in a new tab”.