Introduction to Building FireFox Add-ons/Extensions

Introduction

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)
• HTML
• JavaScript
• Basic XML
• CSS

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:

<? xml  version="1.0"?> 


<overlay  id="status-bar-sample-1-overlay"  
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<-- Adds a new panel onto  the statusbar -->

  <statusbar  id="status-bar">
     <statusbarpanel  id="status-bar-sample-1"

       label="Hello World"
       tooltiptext="Statusbar tip"/>
   </statusbar>
 </overlay>
  </xml>

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:

chrome://<package name>/<part>/<file.xul>

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.

Extension/Package Organization

Each extension is a mixture of many XUL files, JavaScript files, components, CSS files. You can find your installed extension files following the path “C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\5byzdqqy.default\extensions”. You will see the list of all the extensions installed in your FireFox browser. Open the files. The JAR files can be easily opened by first changing the .jar file extension to .zip and unzipping using the normal zip utilities.

The general structure for the extension package is:

Extension name --> chrome --> content
locale
skin
defaults -->preferences-->preference.js
chrome.manifest
install.rdf

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.

Content

It contains the XUL and JS files. Many XUL files have a script file associated with them, and some may have more than one.

Locales

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

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.

Manifest Files

A 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)

Install.rdf

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.

<? xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:em="http://www.mozilla.org/2004/em-rdf#">
 <Description about="urn:mozilla:install-manifest">
  <em:id>sample@indianic.net</em:id>
  <em:version>1.0</em:version>

  <em:type>2</em:type>

  <!-- Target Application this extension can install into, 
  with minimum and maximum supported versions. --> 
  <em:targetApplication>
  <Description>
  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

  <em:minVersion>2.0</em:minVersion>
  <em:maxVersion>3.0.*</em:maxVersion>
  </Description>
  </em:targetApplication>

  <!-- Front End MetaData -->
  <em:name>Sample Application</em:name>
  <em:description>Sample for the code project</em:description>
  <em:creator>Hirva</em:creator>

  <em:homepageURL>www.indianic.com </em:homepageURL>
  </Description> 
  </RDF>  

A brief description of all the tags can be found here.

Finally

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.

Conclusion

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.

History

• 13^th December, 2008: Initial post
• 16^th June, 2011: Removed image from article