Me.Tech()

Bookmarklets are funny pieces of software. Even though its primarily used in the web browser, mainly to perform small nifty tasks, its one resource that you have no control over after its deployed. Unlike Mozilla addon’s that prompt for an update, general websites which update when refreshed, bookmarklets are almost as archaic as delivering software over a CD. Lets take an example of a badly designed bookmarklet: The example below is the Press This bookmarklet distributed by wordpress initially. ( I have changed some of the values of course)

1
2
3
4
5
6
7
8

javascript:
   if(navigator.userAgent.indexOf('Safari')%20>=%200)
    {
         Q=getSelection();
   }else{
    Q=document.selection?document.selection.createRange().text:document.getSelection();
  }
   location.href='http://wordpress.php?username=blah&text='+encodeURIComponent(Q)+'&popupurl='+encodeURIComponent(location.href);

You will see that this is calling a RESTful implementation of some service with query parameters and the whole code is stored and rendered from inside the bookmarklet. Lets leave the security aspects of this implementation aside, that will require another post in itself. Such a bookmark is a nightmare waiting to happen. Imagine the trouble you would face if you changed the implementation tomorrow. You will have to write to ensure backward compatibility or take the user to a page where he/she can upgrade to the newest version of the bookmarklet. This is a bad way of delivering software.

Ideally, the bookmarklet in accordance with a shortcut/bookmark must mainly be a pointer to the actual web resource. Even for trivial bookmarklets, make sure you follow this design principle because you might want to do something different or more advanced later on. I am sure you have come across situations where you realized the bookmarklet you wrote didn’t work on a browser like Opera or Safari. It may be too late to correct it later on if people have already installed it on their browsers.

Lets now take a bookmarklet that loads the code to be executed from a script on the web. This is now the preferred means of deploying bookmarklets as it puts the control back into the hands of the web developer. This example is from the Friendfeed bookmarklet that lets you share things on FriendFeed.

1
2
3
4
5
6
7

 javascript:void((function()
  {
    var%20e=document.createElement('script');
    e.setAttribute('type','text/javascript');
    e.setAttribute('src','http://someserver.com/bookmarkletcode.js');
   document.body.appendChild(e)
  })())

All this bookmarklet does is to append a new script tag in your html page and assigns the source to the bookmarklet source. The difference now is that there is no code on the client side that is tied to an implementation. You can change the code in the bookmarkletcode.js as and when you feel necessary and be assured that the people using your bookmarklet will always use the latest version.