Firefox Extension

Firefox Extension tutorial

Install Firefox extension using the XPI file

To install Firefox extension using the XPI file, simply open it through File->Open File....

Ant build file to package Firefox's extension

Below is an example of Ant build file to package Firefox's extension.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project basedir="." default="build" name="yourFirefoxExtName">
  <target name="build">
    <!-- JAR the content of your chrome/ folder -->
    <jar destfile="${}.jar">
      <fileset dir="chrome">
        <exclude name="${}.jar"/>
    <!-- Create XPI file. -->
    <move file="${}.jar" todir="chrome" overwrite="yes" />
    <zip destfile="${}.xpi" basedir=".">
        <include name="chrome/${}.jar"/>
        <include name="chrome.manifest"/>
        <include name="install.rdf"/>
      The content of your XPI file looks like the following:
      ¦   chrome.manifest
      ¦   install.rdf

Icon/Image in the statusbar of Firefox

In order for the image/icon to appear in the statusbar of Firefox, you have to add 1 of the following classes: statusbarpanel-iconic, statusbarpanel-iconic-text and statusbarpanel-menu-iconic. Detail definition of each class can be found at Here is a code example that I added in my overlay.xul:

<statusbar id="status-bar"><!-- The statusbar id can't be changed. It should match with Firefox's. -->
  <statusbarpanel id="id-statusbarpanel" 
                  tooltiptext="Label shown when mouse is on."

Invoke Java code from Javascript

Standard Java Classes To use the standard Java classes from Javascript, there are only 2 steps:

  1. Insert Packages in front of the fully qualified name of the Java class that you would like to use.
  2. Assign that fully qualified class name to a local variable.

Here is simple example illustrating the 2 steps:

var myJsVariable = new;    

Another more complex example:

// Javascipt
var ArrayList =;
var jArray = new ArrayList(); // Creating ArrayList object.
jArray.add(1); // Using add() of ArrayList object.
// Using Java's static System.out.println() method.
var jOut =;
for(var i = 0; i<jArray.size(); i++)

If the code above is executed, then the output will be displayed in the Java Console of your Firefox located at Tools->Java Console.

Order XUL widgets

You can control where your XUL widgets will be inserted by using the position, insertbefore and insertafter attributes.

Here is an example:

<!-- This is the main box containing the statusbar -->
<vbox id="browser-bottombox">
  <label value="One"   position="1" />
  <label value="Two"   insertbefore="status-bar" />
  <label value="Three" insertafter="status-bar" />
<!-- The output will look like the following:
the status bar here

Want scrollbar to appear in element?

Want scrollbar to appear in element? Add flex="1" style="overflow:auto" to any element.

Here is an example:

<vbox id="browser-bottombox">
  <hbox flex="1" style="overflow:auto" insertbefore="status-bar"/>

Write text in file in your extension's folder

Below is a code sample showing how to write text in file(data.txt) in your extension's folder.


  • You need to change the value of var id variable to match the id of your extension.
  • The code below doesn't write correctly non-ASCII characters. If you need to write non-ASCII, see Writing_textual_data.
  • The location of the file created is stored in file.path. You can use alert(file.path); to view the location.
  • Each time you reinstall/update your extension, your extension's folder will be deleted. Therefore, your saved file in there is also deleted. It is not safe to save data in your extension's folder.
 * Get the path of your extension's folder.
var id  = "";// The extension's id from install.rdf(i.e. <em:id>)
var ext = Components.classes[";1"]
 * Setting up the full path of the file.
var file = Components.classes[";1"]
file.initWithPath(ext.path);  // The path passed to initWithPath() should be in "native" form.
file.append("data.txt");      // Use append() so you don't have to handle folder separator(e.g. / or \).
 * Writing data to the file.
var foStream = Components.classes[";1"]
// See for the description of each octal constant.
foStream.init(file, 0x02 | 0x08 | 0x20, 0666, 0); 
var data = "text to write in the file.";
foStream.write(data, data.length);