FireFox Add-ons is a very popular feature to the browser, it allows a user to add more to the browser or even modify the behavior, often in the form of extra toolbars, context menus, themes or UI to customize the browser.
Extension is an installable file having an .XPI extension. Many of us are aware and use many of the well know extensions. To name a few, we have Web Developer, FoxyTunes, Firebug, and Screengrab.
So let’s start with the basics of extension development.
What Should We Know for the Development?
- XUL (XML User-interface Language)
- Basic XML
Introduction to XUL
XUL (pronounced ‘zool’) is a XML based cross-platform language for describing user interfaces of FireFox extensions. It was developed to make the Mozilla browser development faster and easier.
It is an XML language so all features available to XML are also available to XUL. With XUL, an interface can be implemented and modified quickly and easily. XUL has all the advantages of other XML languages. For example, XHTML or other XML languages such as MathML or SVG can be inserted within it. Also, text displayed with XUL is easily localizable, which means that it can be translated into other languages with little effort.
What Can You Develop using XUL?
- Input controls such as textboxes and checkboxes
- Toolbars with buttons or other content
- Menus on a menu bar or pop up menus
- Tabbed dialogs
- Trees for hierarchical or tabular information
- Keyboard shortcuts
How XUL is Handled in the Browser (Mozilla / FireFox)?
In Mozilla, XUL is handled much in the same way that HTML or other types of content are handled. When you type the URL of an HTML page into the browser's address field, the browser locates the web site and downloads the content.
The rendering engine takes the content in the form of HTML source and transforms it into a document tree.
The tree is then converted into a set of objects that can be displayed on the screen. CSS, images and other technologies are used to control the presentation.
XUL functions in much the same way. The same CSS properties may be used to style both HTML and XUL, and many of the features can be shared between both. You can load both from either your local file system, from a web page or from an extension.
Given below is a simple example of an XUL file of a ‘Hello World’ status bar extension/add-on. Have a look:
<-- Adds a new panel onto the statusbar -->
XUL files can be referenced with a regular HTTP URL (or any type of URL) just like HTML files. However, packages that are installed into Mozilla's chrome system can be referenced with special chrome URLs.
The basic syntax of a chrome URL is:
The FireFox browser window URL is chrome://browser/content/browser.xul. Try typing this URL into the location bar in FireFox!
The text <package />is the package name, such as browser or editor. The <part />is either 'content', 'skin' or 'locale' depending on which part you want. 'file.xul' is simply the filename.
For understanding more on XUL and its elements UI design; I suggest a very nice tutorial which can be found here. You can write your code using any HTML editors, even Notepad still providing you with a simple online editor for XUL click here.
The general structure for the extension package is:
Extension name --> chrome --> content
The files for a package are usually combined into a single JAR file or ZIP file. A JAR file may created and examined using a ZIP utility. There are usually three different parts to a package, although they are all optional. Each part is stored in a different directory. These three sets are the content, the skin and the locale, described below. A particular package might provide one or more skins and locales, but a user can replace them with their own. In addition, the package might include several different applications each accessible via different chrome URLs. The packaging system is flexible enough so that you can include whatever parts you need, and allow other parts, such as the text for different languages, to be downloaded separately.
It contains the XUL and JS files. Many XUL files have a script file associated with them, and some may have more than one.
Contains each language folders having files that specify text used by the package but for a specific language. The locale structure is similar to the others, so we leave and move further.
Default files that you use to seed a user's profile or preferences with should be placed in defaults/ under the root of your extension's folder hierarchy. Default preferences .js files should be stored in defaults/preferences/ - when you place them here, they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the Preferences API.
chrome.manifest file describes a package and maps its location on disk to a chrome URL. The manifest files in the chrome directory will be examined when a Mozilla application starts up to see what packages are installed.
A brief example of manifest file is given below:
content helloworld jar:chrome/ helloworld.jar!/content/
overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
style chrome://global/content/customizeToolbar.xul chrome:// helloworld/skin/style.css
(used when toolbars and toolbarbuttons are applied)
An Install Manifest is the file an Add-on Manager-enabled XUL application uses to determine information about an add-on as it is being installed. It contains metadata identifying the add-on, providing information about who created it, where more information can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on. The format of the Install Manifest is RDF/XML.
<em:description>Sample for the code project</em:description>
A brief description of all the tags can be found here.
The chrome directory contents are packaged up into a zip file and changed to packagename.jar. Further the chrome directory install and manifest files are zipped and change to filename.xpi. Here your extension is ready for installation. Test by calling this XPI file onto the FireFox browser. It will be installed as other extensions.
One thing to add here is that XUL can also be used to build applications other than FireFox extensions like:
- Standalone XULRunner application
- XUL package
- Remote XUL application
This was a very brief introduction to the FireFox extension development, so that you can start going with this new and easy technology. Add-ons are very easy to build, modify, update according to different users, it needs no extra knowledge or resources - just the browser and a simple editor!!!
Enjoy the list of all FireFox add-ons here.
- 13th December, 2008: Initial post
- 16th June, 2011: Removed image from article