Vol. 2, No. 1
Bookmarklets: Take the Web Into Your Own Hands

Bookmarklets, as the name implies, are tiny JavaScript applets that are stored as bookmarks in your browser. The Web bookmarks we've all grown up with are little more than the electronic equivalent of traditionalpaper bookmarks: simple placeholders allowing you to go to a specific Web page, and that's all. But there is vast potential waiting to be unleashed as the bookmark enters the 21st century. The secret of bookmarklets is the often-overlooked fact that one of the URL schemes browsers accept, in addition to things like http:// and ftp://, is javascript. Using this scheme, instead of being dependent on whatever JavaScript the page you surf to happens to serve up, you can type your own JavaScript directly into the location bar of the browser.

Try this. Type "javascript:alert('testing!!')" into your location bar. You should see an alert window pop up that says "testing!!" Cool, eh? But the beauty part is that you can use this JavaScript to interact with the page currently open in the browser window. So if you go to a site and then type in "javascript:alert(document.title)" the alert window will display the title of the page you're at. Just in case you forgot.

The one step remaining is to save this javascript: URL as a bookmark. Do that by going into Edit Bookmarks (or Favorites, or whatever) in your browser. Create a new bookmark pointing to the URL "javascript:alert(document.title)", and call it "Display Title". Now, whenever you select that bookmark, wherever you are on the Web, a little box will pop up and tell you the name of the current page. Congratulations: you've made a bookmarklet.

All right, so that example's not very exciting. Still, it helped you understand the principle, didn't it? Can't ask for more than that. And now we can move on to cool bookmarklets.

Here's a simple one that displays the date and time your computer's set to:

javascript:var dat=new Date();alert(dat.toLocaleString())

It simply reads the current date into a variable called "dat" and then displays it in an alert box, converted to a string using the current locate using the toLocaleString method.

And here's one that converts the background color of the current page to white (to improve readability on badly designed sites):

javascript:void(document.bgColor='#FFFFFF')

How this works should be very clear: document.bgColor is the background color of the document, and we're setting it to FFFFFF, which is hex for white. Right? If you want a red background color, change FFFFFF to FF0000. The one trick is the void operator. This is used simply to get rid of whatever value the function may return, because if we allowed the value to pass through, it would overwrite the content of the window. We don't care about the returned result, we just want the background color to change. Void absorbs whatever is passed to it, and gives nothing back, like a black hole, or certain government employees.

Let's see, what else? You can use your knowledge of JavaScript to create bookmarklets to do pretty much whatever you want. They can automatically scan the contents of a page for certain strings. The following bookmarklet, lifted from www.bookmarklets.com, your mecca for all bookmarklet needs, compiles a list of all the email addresses embedded in links on the page:

javascript:eMlA='';for(iB2M=0;iB2M<document.links.length;iB2M++){if (document.links[iB2M].protocol=='mailto:') {Ju59=document.links[iB2M].toString(); eMlA+=Ju59.substring(7,Ju59.length)+'\n'}}; if (eMlA!=''){alert(eMlA)}else {alert('No mailto links on page!')}

And here's one, also from bookmarklets.com, that combines the functionalities of the Back button and the "Open In New Window" options -- it opens the previous page in a new window. Sounds silly, maybe, but it's very useful in practice:

javascript:dOc7rB3=document.referrer.toString();if ((dOc7rB3!='')&&(dOc7rB3.indexOf('javascript://')==-1)) {void(window.open(document.referrer, 'prevPage'))} else {alert('No previous page.')}

So take these apart and see how they work, and then start creating your own. You can make customized ones that interact with your own site, to allow your users to search your site, navigate it using multiple windows, or whatever you (or they) want. Be creative.

HINTS, POINTERS, AND TIPS 'O THE TRADE:

You may find it easier, when creating bookmarklets, to just make a page of HTML containing the bookmarklets you want as complete links. Then just view the page and choose Add Bookmark for each of the links, one at a time.

Bookmarklets are safe to use -- they're not going to screw anything up on your system -- but do be aware that what works on Netscape may not work on IE, and of course vice versa. Window-controlling code in particular is notoriously platform-dependent. Always test everything.

If you have a bunch of stuff that you suspect you no longer need but are reluctant to get rid of, try sealing it in a box. If after half a year you haven't been tempted to open the box, you should probably just throw it out.

RESOURCES:

The central bookmarklet resource in the world

Bookmarklets.com's fabulous More Info About tool

Webmonkey's JavaScript tutorial

Handcrafted Archive