Help for Bookmarklet Builder

The Bookmarklet Builder is an on-line editor targeted at bookmarklets. It works with Mozilla/Netscape 6+, Opera 7, and Internet Explorer (tested under Windows).

What it Does

In order for a bookmarklet to execute in the browser it must be compressed into a single line. Large bookmarklets which consist of many statements are hard to edit as a single line - especially when there are lots of parentheses and brackets. To make editing easier I created the Bookmarklet Builder.

The Bookmarklet Builder allows you to work with a nicely formatted version of your code (with indentations and line breaks). You can alternate between a formatted and a compressed version of your code. The compressed version is the one you use as the final bookmarklet.

Here's an example of what the compressed text could look like:

javascript:function resizeTextAreas(w){try{var areas=w.document.getElementsByTagName('textarea');
for(var j=0;j<areas.length;j++){areas[j].cols*=2;areas[j].rows*=2;}for(var i=0;F=w.frames[i];i++){

And here's the corresponding formatted text, which is a lot easier to edit:

function resizeTextAreas(w){
    var areas=w.document.getElementsByTagName('textarea');
    for(var j=0;j<areas.length;j++){
    for(var i=0;F=w.frames[i];i++){

The Builder is not only a formatting tool, but also a simple syntax validator. The validation (which is done automatically when you toggle between formatted/compressed view) ensures that the code contains valid pairs of parentheses ( ) and brackets { } and that strings and string expressions are properly terminated.

Furthermore, the Builder catches run-time errors, allowing for easier testing of your bookmarklets. When an error is caught a message describing the error is shown, and if possible the cursor in the edit area is positioned where the error occurred.

The Features Explained

These are the available features:

"Bookmarklet name" textbox The name of your bookmarklet.
"Rows" textbox The number of rows you want in the edit area.
"Javascript code" textbox Your code. Remember to start with "javascript:"
"Format" button Validates and, if valid, presents formatted code. If the code is somehow invalid an error message is shown, and the position is marked visually.
"Compress" button Removes all line line breaks and all spaces (except inside strings and near reserved words such as "var" or "function").
"Wrap text" checkbox Toggles word wrapping on/off. I find wrapping is necessary when working with compressed code, but impractical when working with formatted code. The checkbox is automatically toggled when you switch between the two modes.
"Replace ..." button Prompts you to replace all ocurrences of one string with another.
"Replace %20" button Replaces all ocurrences of "%20" with a regular space character, except inside your strings.
"DOM Browser" button Opens a tool for investigating the DOM of the current window. Useful if you test the bookmarklet in the Bookmarklet Builder page. Doesn't work with Netscape 6.
"Go to..." button (Only visible in Internet Explorer) Jumps to a specific character position in the edit area. This is useful for finding runtime errors, as the browser reports at which char. position the error occured. The position reported by the browser matches the position inside the edit area when the code is compressed.
"(function()...)" button Surrounds your code with "(function(){...})()". This is a useful way to encapsulate your code to avoid return values.
"(Bookmarklet)" field A link that is generated when you use the "Format" or the "Compress" button. This link allows you to immediately test your bookmarklet (just click on it to execute it on the editor page, or drag it to another browser window - or just drag it to a folder and execute it later).

Common Questions

Comments, suggestion, bug reports? Send them to me.

Troels Jakobsen
Bookmarklet Builder was last updated 10 May 2004.