This tutorial demonstrates how to build a status-bar type Mozilla extension.
The first thing to do, after you have downloaded the file, is unzip it. This results in two files: install.rdf, which is a manifest of your Extension, and a chrome folder with an extensionname.jar in it.
$Editor the install.rdf file. As you can see, it is simply RDF, using the RDF and "em" namespaces to describe the package.
- em:id is a specific string related to your project. In order to create a uuid, run "uuidgen" on any *nix box:
[crschmidt@zeus ~]$ uuidgen 6ab234de-d450-46f4-9ebd-31ebee52be20.
- Version number. Version number of your extension
- targetApplication, assuming you're building for Firefox, can be left alone.
- name, description, creator, homepageURL: all self explanatory. Insert your own.
- File: we are going to include one java jar file in this package. It is currently named extensionname. You will probably want to change this in the Description and package lines
Change to the chrome directory. Here you can see we have a .jar file, which is again, really just a zip file. Unzip "extensionname.jar", to create the content directory: change into it, then into the extensionname directory.
This is the meat of the extension. Here you have the description:
- browserOverlay.xul: Changes to the actual Mozilla interface. This is where we're going to describe our statusbar item.
- extensionname.css: CSS to describe various properties. Not really useful in this case, as we're not using CSS to do our work.
- extensionname*.png: Images for `on` and `off` in the statusbar.
In addition to these, you have a contents.rdf file. This file contains information about your plugin: specifically, the .xul file, which relates it the file to the browser. You'll need to change anything that says "extensionname" to the name of your extension. You'll most likely also want to change the extensionname.png files to have a name that better mirrors your extensionname, although this is not strictly required.
The statsbar has a tooltip, with an id and a description. This tooltip will appear over the statusbarpanel we are about to create.
Next is the part of the extension that you'll need to edit:
- lightup: Code to determine whether the icon should change to "On" mode.
- extensionname_lightup: Code to change the icon image to the "lit up" or "on" version.
- main_extensionname: Code which is executed on loading a page or tab. (As determined by the LoadListener.
- addLoadListener: Function to add event checking. The default checks for navigation or tab events.