Jetpack is a new addon for Firefox that allows additional extensions to be created using standard JavaScript and HTML. This free tutorial steps you through the process of creating a simple Jetpack extension.
Install the Jetpack addon from here. Once it is installed you should get the about:jetpack link in the Firefox tools menu.
Download and extract the Base64 utility from here. This utility will convert an image file into a format that can be embedded inline in a HTML img element.
Convert the icon that will be used for the extension (a Google PNG icon is included with the source code for this demo) into a Base64 format by running the following command:
base64 -e googleicon.png googleicon.txt
Create a new file called googlelink.js. Add the following code.
jetpack.statusBar.append({
html: '<img src="data:image/png;base64,ENCODED_BASE64_STRING"/>',
width: 32,
onReady: function(widget){
$(widget).click(function(){
jetpack.tabs.focused.contentWindow.location = "http://www.google.com/search?q=link:" + jetpack.tabs.focused.url;
});
}
});
jetpack.statusBar.append takes a JavaScript object with the properties html, url, width and onReady.
The html property defines the initial HTML that will be displayed on the statusbar. For this demo we are displaying a simple IMG element. In order to keep the extension self contained, the image that is displayed is encoded into the element rather than being a reference to an external image file. You would replace the text ENCODED_BASE64_STRING with the contents of the text file created by the Base64 utility in step 3.
The url property (not used here) defines the URL of some external HTML contents that will be displayed on the status bar.
The width property defines the width of the contents on the status bar, in pixels. We have specified a width of 32 pixels (which is the same width as the IMG element).
The onReady property is a function that will be called once the status bar panel has been created. You will note that the onReady function makes use of the jQuery library (the dollar symbol is synonymous with jQuery), which is built into Jetpack, to attach a function to the extension click event. In the click event function we modify the jetpack.tabs.focused.contentWindow.location property to do the appropriate Google search. The jetpack.tabs.focused.contentWindow object is equivalent to the window object that you would access from JavaScript in a regular web page.