Developing a Firefox Extension – the XPI file and XUL

After setting up your environment for the Firefox extension development, the next step would be knowing about the extension file structure.

A Firefox extension is packaged and distributed as an XPI file (pronounced as Zippy). This is nothing but a zipped file with an extension of ‘.xpi‘. Since it’s an zip file, you can extract any Firefox extension, using a standard ZIP utility such as 7Zip, to see the contents of the XPI file. This lets you to have a look at the soure code of other extensions, thus providing a valuable source of information.

Basic Structure of an XPI file:

As now you know what is an XPI file, lets move on to the contents of an XPI file. Below is a basic contents that you can find in an XPI file.

extensionName.xpi
                    /install.rdf
                    /chrome.manifest
                    /chrome/
                              /content/

As you can see above:

• your extension file is named with an .xpi extension.
• at the root of your extension, you have install.rdf file which will contain the information about your extension, such as author name, web page, etc, and the supported Firefox version data.
• next there is the chrome.manifest file, which will contain the information to register your extension with the Firefox UI.
• Finally the chrome/content/ folder is where you place your extension UI defintion files (XUL), supporting JavaScripts, images and other resources.

Apart from these basic files, the XPI may contain skin information, localization files etc. But as they are out of the scope to this post, I’ll not be covering those.

What is XUL?

If you are developing a Firefox extension, then it is very much important to know about XUL (pronounced as zool). XUL stands for XML User Interface Language, which is the XML based language used in Mozilla applications, such as Firefox, Thunderbird, to define the user interface. To make it simple, think XUL as HTML, where you’ll have tags for the user controls, like textbox, command button, etc. Similar to HTML, you can even apply CSS styles to XUL controls.

I hope that’s enough for the basics of Firefox extension development. In my next post, I’ll be explaining the entire workflow with a complete example.