Better Living Through Bookmarklets

Bookmarklets are a simple way of adding functionality to your Web browser, and can be a useful addition to your workflow as a Web developer.

In this article, I'll point out some useful bookmarklets, provide tips on building your own, and demonstrate some advanced techniques for making the most of these powerful tools.

A bookmarklet is a short piece of JavaScript embedded in a browser bookmark. The JavaScript is executed when the bookmark is selected. The magical thing is that this execution occurs in the context of the current page. The bookmarklet has access to the full document object model of the page and can modify it and use the information therein to launch new windows or redirect the browser to other sites.

If you've never experimented with bookmarklets before, you should do so before reading the rest of this article. www.bookmarklets.com and www.favelets.com both provide extensive bookmarklet collections, and Jesse Ruderman has arguably the most comprehensive bookmarklet collection on the Web at www.squarefree.com/bookmarklets. Jesse's Web Development bookmarklets, in particular, should be a required addition to any Web developer's browser.

Bookmarklets work with all modern browsers that support JavaScript, but some browsers are more bookmarklet-friendly than others. Internet Explorer 6 for Windows suffers from an infuriating 508-character limit on the size of bookmarks, which seriously reduces the range of bookmarklets available for that browser, although a technique that I'll cover later does provide a partial remedy. To get the full benefit of bookmarklets, I recommend you use a Mozilla-based browser such as the excellent Firefox, which also comes with a number of useful tools to aid bookmarklet development.

One of the charms of bookmarklet development, however, is that the cross-browser concerns that frequently plague serious JavaScript development are avoided: there's nothing wrong with developing a bookmarklet for a specific browser (especially bookmarklets for personal use), so developers can literally do anything that their browser will let them.

Common Bookmarklet Variations

If you've explored any of the sites mentioned earlier, you should have an inkling of the huge range of functionality that bookmarklets can provide. The simplest and most common variety of bookmarklet is the simple navigation bookmarklet, which takes the URL of the current page and passes it on to another site. Classic examples are "validation" bookmarklets, which redirect the user to an online HTML or CSS validation service for the current page.

These bookmarklets are trivial to create, but can be adapted to some very useful ends. I've had a lot of fun creating "edit this page" bookmarklets for Websites that are powered by Web-based content management systems. Many such systems embed an ID in the URL of pages on the public site, directly corresponding to the ID used in the URL of the form for editing that page's content in the site management system. An "edit this page" bookmarklet extracts the URL of the current page and uses it to instantly redirect the user to the edit interface for that page.

For example, imagine a site with URLs like this:

http://www.site.com/articles/123

The site also has a password-protected management interface, which offers an "edit page" interface at the following address:

http://www.site.com/admin/edit-article?id=123

An "edit this page" bookmarklet for the above site could be implemented thus:

javascript:document.location='http://www.site.com/admin/
edit-article?id='+document.location.href.split('/').pop()

This concept can be greatly expanded if you have some control over the content management system in use on the site. For example, in a site that doesn't expose the internal ID of an article in the URL, you could instead serve the ID up in an HTML meta tag, which would then be available to an "Edit This Page" bookmarklet through the DOM.

Many bookmarklets modify the current page in some way. Common examples include bookmarklets for "zapping" annoyances such as unwanted Flash animations or even images that are sized to common dimensions for banner ads. These can be fun, but are often limited by the need to be activated manually every time a page is loaded.

More useful are bookmarklets that help Web developers analyse the structure of a page, or even modify the page structure, 'live'. My personal favourite of these are Jesse Ruderman's "test styles", "edit styles" and "ancestors", from his Web Development collection. The latter shows the HTML element hierarchy leading to the section of the page under the mouse cursor, which is great for figuring out how CSS can be applied to a page. The former two allow the CSS for the current page to be modified "live", providing instant feedback on potential design changes.

My Image Drag bookmarklet for Mozilla makes every non-background image on a page "draggable", which can also be an aid when considering tweaks to a page's design.

One useful but frequently overlooked JavaScript trick is that entire HTML pages can be embedded in a bookmarklet. Try entering the following directly in to your browser's URL bar:

javascript:'<h1>This is HTML</h1>'

The browser should display the rendered HTML from the string. It does this because the string is evaluated as an expression, the result of which is then displayed in the current browser window. The same trick can even be used to turn your browser in to an over-specified calculator:

javascript:1 + 4;

It can sometimes be useful to write bookmarklets that embed an entire page in this way, especially if they require a user interface more complex than simple confirm() and prompt() boxes.

Assisted Text Entry

I spend a sizable portion of my time online staring at textarea boxes. The three blogs I update are all maintained through textareas, as are the sites I develop at work, and the various online forums I participate in. Textareas are everywhere. They're also a far-from-optimal way of working with text, especially when compared with dedicated text editor software. Bookmarklets can make dealing with textareas significantly less painful, and can give them useful additional functionality.

My favourite example of a textarea-enhancing bookmarklet is another one from Jesse Ruderman: Blogidate XML well-formedness -- a Mozilla/FireFox bookmarklet, which checks that the text in every textarea on a page is well-formed XML and changes the background colour of the textarea accordingly. This is great for catching simple mistakes in XHTML before posting it to a site. Jesse also has a suite of HTML validation bookmarklets, which check the syntax of HTML fragments in textareas using the WDG validator.

Another tool I use regularly is my expand HTML shorthand bookmarklet. This applies a sequence of simple conversions to text in textareas:

1. Text blocks separated from each other by a blank line are wrapped in paragraph tags


2. Lines starting with an = sign are converted in to <h4> headers


3. Lines starting with an * become bulleted lists

Example:

= Header

Paragraph

* list 1
* list 2

Becomes:

<h4>Header</h4>

<p>Paragraph</p>

<ul>
<li>list 1</li>
<li>list 2</li>
</ul>