Introduction to Building FireFox Add-ons/Extensions

What should we know for the development?

• XUL (XML User-interface Language)
• HTML 
• JavaScript
• Basic XML
• CSS

Introduction to XUL

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

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>

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

Understanding more on XUL and its elements UI desgin; 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 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

Locales

Default files

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:

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

Conclusion