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:
content myextension ./ overlay chrome://browser/content/browser.xul chrome://myextension/content/browseroverlay.xul
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:
<?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> </overlay>
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):
<toolbar id="PersonalToolbar" oncontextmenu="event.preventDefault();"/>
You may wonder how I figured that out. We’ll talk about it in our later posts. For now, just know you have the basics on how to customize the Firefox UI with an extension.
Again, my plan with this post is not to go into detail about how to do specific things. It’s just to give you a basic understanding of how to change the Firefox user interface.
In the next few posts, I’ll show you how to make specific tweaks to Firefox by either modifying this overlay or overlaying other windows within Firefox.