How to write mozilla extension

Introduction
A Mozilla extension is an installable enhancement to the Mozilla browser that provides additional functionality.For e.g firebug is one of the powerful extensions i have used. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page with it.

Extensions actually contains ZIP files or Bundles, with the XPI (pronounced “zippy”) file extension.

Basic Structure

An example of the content within a typical XPI file:
example.xpi:
/install.rdf
/chrome.manifest
/content/*.xul
/defaults/preferences/*.js
/locale/en-US/*.dtd *.properties prefwindow.dtd
/skin/*.css

Now we will create a folder for e.g. my_extension and create above files and folders inside it.

Creating install.rdf
Open install.rdf in text editor and add following lines to it.

<?xml version="1.0" encoding="UTF-8"?>
<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>format@email</em:id><!--unique for extension -->
<em:name>Name of extension (optional)</em:name>
<em:version>Version of extension (optional)</em:version>
<em:creator>Name of author (optional)</em:creator>
<em:description>Description of extension (optional)</em:description>
<em:homepageURL>Home page of extension (optional)</em:homepageURL>
<em:updateURL>Available updates location (optional)</em:updateURL>
<em:iconURL>Icon for extension in the format chrome://ifeed/content/*.png (optional)</em:iconURL>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- id of firefox -->
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>

Understanding the browser user interface
Firefox's user interface is written in XUL and JavaScript. XUL is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. User actions are bound to functionality using JavaScript.

To extend the browser, we modify parts of the browser UI by adding or modifying widgets. We add widgets by inserting new XUL DOM elements into the browser window and modify them by using script and attaching event handlers.
Open chrome://browser/content/browser.xul in your browser you will see the browser inside the browser
The browser is implemented in a XUL file called browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar contains content/browser/browser.xul). In browser.xul we can find the status bar, which looks something like this:

<statusbar id="status-bar">
... <statusbarpanel>s ...
</statusbar>

<statusbar id="status-bar"> is a "merge point" for a XUL Overlay.i.e we can create our own xul file to overlay our component on the status bar.


Example XUL Overlay

<xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World"/>
</statusbar>
</overlay>

Take this sample code above and save it into a new file called sample.xul inside the content folder you created

Create a Chrome Manifest
Open the file called chrome.manifest that you created and these lines to it

content example content/
locale example en-US locale/en-US/
skin example classic/1.0 skin/
overlay chrome://browser/content/browser.xul chrome://example/content/sample.xul

We have completed our hello world extension for mozilla. Now we will select the all files & folders (i.e. content,defaults,locale,skin,chrome.manifest,install.rdf) and create a zip file named example.zip. We will change the extension of example.zip to example.xpi

example.xpi is our extension now we can drag n drop example.xpi to firefox browser to install it.
Once it is installed it will ask to restart the browser.
After you restart the browser you will see Hello World in the right corner of your status bar.


References:
Extension Development Documentation
XUL Tutorials

For Help
Extension Development IRC