AJAX: Creating Huge Bookmarklets

A bookmarklet is a special piece of JavaScript code that can be dragged into a user's link toolbar, and which later can be clicked on to implement cross-site behavior. People have done all sorts of cool stuff with it.

Bookmarklets have size limitations, which differ based on browser and platform, since they must fit into a certain number of characters. They can also be difficult to maintain for more sophisticated scripts, since every line of JavaScript code has to be jammed into one line.

I've put together a way to have huge, arbitrarily sized bookmarklets, where most of the code resides outside of the bookmarklet link. I'll explain how this works in this mini-tutorial.

First, view the entire code. The essential idea is that we dynamically insert a new script element into the DOM through our bookmarklet. Here is the code that is within the bookmarklet URL, formatted to be more readable:
function loadScript(scriptURL) {
var scriptElem = document.createElement('SCRIPT');
scriptElem.setAttribute('language', 'JavaScript');
scriptElem.setAttribute('src', scriptURL);
document.body.appendChild(scriptElem);
}

loadScript('http://216.203.40.101/projects/tutorials/'
+ 'creating_huge_bookmarklets/helloworld.js');
In the code above we create a new script element and set it to the new URL. We then call the script with a URL that is different than the Coding in Paradise site, to show that cross site scripting insertion works. We then append the new script block to the document. The script we use, helloworld.js, is very simple:

alert("Hello World!");

When this script is loaded, it will immediately cause the Hello World message to appear.

The full loadScript method and method call are rolled into a single javascript: URL to turn it into a bookmarklet.

Try the script yourself, dragging the link to your toolbar. Then, navigate to other sites and click the bookmarklet link; you will see the message Hello World appear, loaded from an external script. You can also view a screencast that shows the bookmarklet in action, being dragged to the toolbar and working cross site.

This code has been tested in IE 6+ and Firefox.

Comments

Lucas Gonze said…
Hey Brad --

This is just a general note to say that I'm finding your series of posts on AJAX nuts-and-bolts pretty handy.

- Lucas
burtonator said…
Hey...

You forgot two main advantages to this approach.

1. Maintainence. Since the bookmarklet would never really update you could push it out once without having to force users to update theri bookmarklet code.

2. Development. Since it's a REAL javascripot you can have real elegant code and you wouldn't need to hack everything into one line.

You could also deploy new features easily.
Rowan Nairn said…
plus:

3.Customization. Make the javascript come from a server side script. Then if the user is logged into your site with a cookie you can serve a custom javascript. Or serve a different one depending on the time of day. Or whatever...

If you don't want the browser to cache the script though you better add a random number to the end of the url. This is how wists.com works anyway.
fps said…
Hi,

very nice tip. One strange thing : doesn't seem to work on w3c home page with firefox 1.5 (mac). (Does work with Safari)

Regards
Brian OConnor said…
Hmmm, not sure if this will work across security contexts. Has anyone tried using this on an SSL page. Seems to me, at a minimum the user will be asked to display secured and non-secure items.
Cavorticus said…
Failed completely on IE 6.0. Worked perfectly on Firefox.
Joe said…
To get it working in IE, I found that you need to wrap the last statement in a void();

void(document.body.appendChild(a));

It now works for me in IE 6 and 7.