Bookmarklets 101

Dietrich Kappe, Thursday, September 21, 2006 @ 8:00 am

Today I want to build the "Hello World!" of bookmarklets. Actually, I'm going to build two versions, the second of which will allow us to do bigger and better things than the first. So, what exactly is a bookmarklet? It's a bookmark that points to javascript instead of a web page -- javascript:... instead of http:.... This Javascript then runs in the context of the current page -- sort of a Greasemonkey script that you invoke by clicking or selecting a bookmark.

If you're using Firefox, this is going to be a whole lot easier than if you're using IE, Opera or Safari. In Firefox, you can drag a link to your toolbar and have it easily available for use. In IE and Opera, you can bookmark the Javascript link and have it available in your bookmarks dropdown menu. As far as Safari goes, not all bookmarklets work in it -- as we'll find out, there's not really enough space in a bookmarklet to do much cross browser support --, but this won't really be a problem for us given this bookmarklet's code and the direction we are going with the second version.

OK, here's the first version. It's about a simple as it gets:

javascript:alert("Title: " + document.title);

You can try out this bookmarklet below.

Drag the following link to your toolbar or bookmark it:
Title

IE will complain (provided your system has the latest security patches) about adding an unsafe bookmark. Browse to a different page and select the bookmarklet and you will see that it correctly displays the page's title. So far so good.

What if we want to do something more substantial, say write a bookmarklet that would inspect the DOM of a page and modify it based on some sort of algorithm? Well, bookmarklets can only be so large -- no more than 255 characters in some older browsers, a few thousand characters in the case of the newer ones. If you're going to write bookmarklets that do interesting things, where are you going to put the code? One approach, is to use an Ajax technique known as DOM-based on-demand Javascript. That's just a fancy name for inserting a script element into the DOM of the current page. There are lots of bells and whistles we will add in future examples, but for the moment we will keep it simple.

The second version looks like this:

javascript:(function(){var s,d=document,a=function(o){d.body.appendChild(o)};s=d.createElement('script');s.type='text/javascript';s.src='http://labs.pathf.com/bm101/hello.js';a(s)})();

At the top level we are declaring an anonymous function and calling it, all in one step -- (function() { .....})();. The code creates a script element, sets its type and source and appends it to the document. We've used lots of dereferencing to save characters, such as assigning d=document. Now, on the server-side, we create a little JavaScript file that contains our familiar alert statement:

alert("Title: " + document.title);

Try out our new example:

Drag the following link to your toolbar or bookmark it:
Title2

OK, so what's the big deal? Didn't we just do the exact same thing in a more complicated way? Yes and no. Yes, the new bookmarklet does exactly what the old bookmarklet did but in a different way. It included a JavaScript file into the context of the current page. Into that file we could have put as much other JavaScript as our hearts desired. We could even, with some precautions, have included our favorite Ajax library to manipulate the DOM and make asynchronous requests. The bookmarklet thus becomes just the leading wedge that allows us to load in more substantial program logic.

For a Web 2.0 example of a bookmarklet, have a look at Blummy, which allows you to share useful bookmarklets with other users. A word of warning, however, about bookmarklets: you're inviting someone else's code into your browser. Once in, they can do a great deal of mischief. When evaluating bookmarklets ask yourself, "how much do I trust this company or individual?"

Next time we'll go beyond the mere "Hello World!" and try to be a little bit more disruptive.

 
  Technorati : ajax, bookmarklets

Related posts:

1. Using Bookmarklets to Disruptive Effect
2. BJAX: A Quick Hack for Using GWT with Bookmarklets
3. Blummy – Bookmarklets with A Whole Lot of Ajax
4. BJAX – Hacking Google Maps with Bookmarklets
5. Using Sarissa to Scrape HTML with Ajax

Comments (5)

Software Development

Comments: 5 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   One area I would love to see covered is the area of popups. I need to have a user login (potentially) and enter in some data after clicking on the bookmarklet.

   This is an action that the user is driving by initiating the click so I should be able to popup a window over what he/she is doing. However, the window normally pops up behind the browser with the latest versions of Firefox. That’s annoying.

   I would love to find a way to bring up my own window in without it being something that someone else can exploit so it gets turned off by the browser somewhere down the line and my bookmarklet gets broken.

   Comment by John Munsch, Thursday, September 21, 2006 @ 10:55 am

2. 

   Dietrich, keep in mind that if you’re loading your “favorite Ajax library” you’ll still be subject to cross-site scripting restrictions. Thus, even though you can source your library from your domain you won’t be able to use XmlHttpRequest to communicate with that domain (because you’re considered part of the domain hosting the page into which your script has been injected).

   John, check out Blue Dot (http://bluedot.us/), we are using this technique to collect bookmarking data.

   Comment by Derek, Thursday, September 21, 2006 @ 2:06 pm

3. 

   Derek,

   those tricks and tips come next — how to grab data from other sites without using XMLHttpRequest, how to grab data from the current site and use it for a self mashup, etc.

   There’s quite a bit that can be done even with the cross-site restriction. Stay tuned.

   Comment by Dietrich Kappe, Friday, September 22, 2006 @ 11:25 am

4. 

   Opera does let your make a bookmarklet into a button quite easily. Bookmark the link, and make sure you check the checkbox that says ’show in panel’. From there you can drag that button to wherever you want.

   Comment by Jadd, Thursday, June 7, 2007 @ 5:24 am

5. 

   Thanks to inspiration from this article I created a bookmarklet that turns any page that links to MP3s into a full featured media player.

   It’s available here: http://grabb.it/pages/playable

   Thanks to jQuery’s controlled scope and some clever closure usage I don’t leak anything but DOM Elements into the global scope. Thanks for the idea, I think the applications of this sort of thing are pretty much limitless.

   Comment by Chris Anderson, Monday, November 19, 2007 @ 8:13 pm

Leave a comment