Mozilla, money, microformats and more

Post navigation

Customizing Firefox – Extensions

I’ve decided I’m going to expand on my earlier post about customizing Firefox with extensions. A lot of the things people have asked for recently can only be accomplished with extensions, so I want to try to give people a very basic handle on creating extensions so I can then give sample code of the specific things people are trying to do.

My goal here is NOT to teach people how to build extensions. You can find that information on AMO or MDN. My goal is give people a very basic understanding of how one particular type of extension works so I can produce simple code snippets you can drop in and use for your Firefox distribution. If you need anything more complex, you’re going to have to hire me.

For the purposes of this discussion, we are only going to focus on extensions hosted in the distribution/bundles directory. The reason is simple – these add-ons do not require any infrastructure like install.rdf or icons. They can consist of only two files, a chrome manifest and a XUL overlay.

Step one is to create a directory for our extension under the distribution/bundles directory where Firefox is installed. You might have to create the distribution directory as well. The directory you create can have any name – it does not have to be the ID of the extension or anything like that. In the new directory, we’re going to create a file called chrome.manifest.

The chrome manifest describes an extension to Firefox or any other Mozilla based product. If you want lots of detail, you can read it on MDN. A minimal chrome manifest only needs two lines:

The first line tells Firefox where to find the content of the extension (in the same directory) and the second line tells Firefox to overlay the main browser window with our file, browseroverlay.xul. In later posts, I’ll show you how to overlay different windows and dialogs.

myextension should be changed to something unique for your extension. It can clash with other extensions that are installed.

Next up is the XUL overlay. XUL is an XML based language used for the UI of Firefox. You can read more about it on MDN. XUL overlays allows us to change the user interface of Firefox by replacing and changing the attributes of existing user interface elements. A basic XUL overlay looks like this:

Once we’ve created these two files, we can just add code into the overlay to tweak the browser. For instance, I had a request to block the context menu on the bookmarks toolbar. To do that, you add this code to the overlay (between the two overlay tags):