Juixe TechKnow knowing is half the battle

The Anatomy of a JavaScript Bookmarklet

I think of bookmarklets as a way to greasemonkey patch a webpage with custom JavaScript not approved by the author of the website you are visiting. Bookmarklets are a bit of JavaScript that you save as a bookmark and when visiting a page, if you click on that bookmark, the JavaScript will run on the context of the current page that is being viewed. This allows you to modify the current page in ways that the original author did not think off or allow. In essence, bookmarklets are a way to extend, modify, and enhance sites you are visiting.

Common examples of bookmarklets are the Amazon Universal Wishlist, Tumblr share bookmarklet, and DZone submission bookmarklet. In the case of the Amazon bookmarklet, when you click the bookmarked JavaScript a new frame dialog pops up that allows you to select an image from the current page, add a price, and title and then add that product description to your Amazon wishlist. The Tumblr and Dzone bookmarklets help in submitting the current page to their respective services as a social bookmark.

Bookmarks are not new, they have been around since JavaScript was first introduced, but it is a technique that opens a lot of opportunities for a power users. Bookmarklets allows your users to submit information to your service about and from whichever website they are visiting.

Here is the hello world example of a bookmarklet.

Type the above code snippet in the location bar of your browser and click enter! You should have seen the alert dialog pop up with the correct greeting. That is your first bookmarklet.

To allow users to save the JavaScript bookmark as a bookmarklet into their favorites or bookmark toolbar you will need to create a link. Here is an example of a link with a bookmarklet.

Now that we have the mechanics of a bookmarklet down, lets go over some practical scenarios. In the examples listed above, the bookmarklet simply loads an additional JavaScript source file that acts as the main application which in turn may load additional resources such as images and CSS files. Once all the resources have been loaded, from the main JavaScript source file, you can invoke the necessary methods.

Here is an example of the JavaScript bookmarklet which will load the secondary JavaScript main application source file. This bookmarklet simply acts as a loader. Notice that for the actual bookmarlet, the JavaScript needs to be escaped and obfuscated into a single line.

Again, you need to obfuscate the above JavaScript into a bookmarklet by removing all non-essential white spaces and line breaks. The bookmarklet should all fit in a single line in the href of a HTML link. That said, lets explain the above bookmarklet a bit. The first thing that will happen is that the a new HTML script tag will be created for the main JavaScript source file. The script will set timeouts until the additional script file has been downloaded, interpreted, and the MainApp object is defined. Once the MapApp object has been defined you can invoke the custom code that will run in the browser in the context of the current web page. The MainApp object is defined in the JavaScript file which was loaded by the bookmarklet.

For completeness sake, here is a simplified trivial example of the main JavaScript source file.

Remember that the main JavaScript source file can load additional resources, ask for user input, and post data back to your server. It runs in the context of the current page you are visiting and has access to all elements in the DOM. In my opinion, bookmarlets are the easiest way to enhance a page without using a browser plugin or extension.

Dynamically Create HTML Elements with JavaScript

Twenty-five percent of AJAX is the J part, the JavaScript. When working with dynamic data coming from the back end you must create the necessary DIV containers and HTML elements and append the new new elements into the document body. In FireFox you can create a new element using the createElement method on the document object. It is good to note that creating an element this way just creates a object, and does not actual insert the element into page until you append it a parent element node.

This is all simplified with jQuery, especially since jQuery normalized the browser quarks and differences. Here is the equivalent code but using jQuery, note that you need to load the appropriate jQuery JavaScript version for this work in your browser.

All that can be streamlined and broken down to two lines.

Using jQuery you can actually create more complex HTML elements than a simple link.