Quick Guide to Bookmarklets

Recently, I’ve been playing around with writing Firefox extensions to add toolbar buttons that allow me to add a couple of simple tools I’d like to see on my toolbar. More on that soon, but in the process I’ve written a couple of bookmarklets to test some of my ideas. So my next couple of posts will be about bookmarklets. Here’s one to get started.

First of all, I call these things “bookmarklets”. I use Firefox for my main browser, which has a bookmark manager. Most people will be familiar with the Favorites menu/folder/sidebar in Internet Explorer. I never even used Favorites when Internet Explorer was my main browser, so they’ve never been “Favelets” to me.

Bookmarklets have been around for a long time. They are simple JavaScript programs that you can activate as you would a bookmark, making them quite handy tools. These are especially handy when your browser doesn’t let you add custom buttons to your toolbar.

Web designers and developers in particular started using them to make frequent tasks easier. For example, you could program one to resize your browser window to a variety of screen resolutions. Some designers still use bookmarklets for such tasks. Personally, I use Firefox with Chris Pederick’s Web Developer toolbar or Internet Explorer with the AIS Web Accessibility Toolbar which cover many of my common tasks. Other bookmarklets can help general browsing. For example, Movable Type uses bookmarklets to make it easy for you to publish to your blog when you stumble across something that inspires you while browsing.

How to use bookmarklets

Bookmarklets will usually appear on pages as hyperlinks like those that trigger some JavaScript. You save a bookmarklet to your Bookmarks (or Favorites) in the same way you would a normal link. You can drag and drop the link into your Bookmarks or hit “Bookmark This Link” (“Add to Favorites” in Internet Explorer) in the context menu of the link you want to save. Internet Explorer will usually give you a warning message when you try bookmarking a JavaScript link, but don’t worry about it.

Once you’ve saved a bookmarklet, you can access it as you would a bookmarked website. When you’re on a site on which you want to perform the bookmarklet code, go to where you saved the bookmarklet and hit it. It will then perform its JavaScript magic on the site.

I can’t write no stinkin’ bookmarklet!

Steve Kangas’ bookmarklets.com has a vast library of bookmarklets to get you started, and our good friend Tantek Çelik has a few favelets. Also, those Web developers out there who haven’t yet heard of the slayeroffice Favelet Suite really should go and check them out.

More to come

I’m no JavaScript guru, but I know enough to get by. I have created a couple of bookmarklets recently and it really wasn’t all that difficult, so I’m going to write soon about how I did those. In the meantime, check out the bookmarklets I created to help Elfin over at permanent tangent and the GAWDS Site of the Month nomination bookmarklet generator (what a mouthful).