IntroductionA 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 StructureAn 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.rdfOpen 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 interfaceFirefox'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 ManifestOpen 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 DocumentationXUL TutorialsFor HelpExtension Development IRC
Posts
