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="${ant.project.name}.jar">
      <fileset dir="chrome">
        <exclude name="${ant.project.name}.jar"/>
      </fileset>
    </jar>
 
    <!-- Create XPI file. -->
    <move file="${ant.project.name}.jar" todir="chrome" overwrite="yes" />
    <zip destfile="${ant.project.name}.xpi" basedir=".">
        <include name="chrome/${ant.project.name}.jar"/>
        <include name="chrome.manifest"/>
        <include name="install.rdf"/>
    </zip>
    <!--
      The content of your XPI file looks like the following:
      C:.
      ¦   chrome.manifest
      ¦   install.rdf
      ¦
      +---chrome
              yourFirefoxExtName.jar      
    -->
  </target>
</project>

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 https://developer.mozilla.org/en/XUL/statusbarpanel#Style_classes. 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" 
                  image="chrome://yourExtension/skin/mainicon.png"
                  class="statusbarpanel-iconic"
                  tooltiptext="Label shown when mouse is on."
                  />
</statusbar>

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 Packages.java.util.ArrayList();    


Another more complex example:

// Javascipt    Packages.fully.qualified.java.class.name.
var ArrayList = Packages.java.util.ArrayList;
var jArray = new ArrayList(); // Creating ArrayList object.
 
jArray.add(1); // Using add() of ArrayList object.
jArray.add(2);
jArray.add(3);
 
// Using Java's static System.out.println() method.
var jOut = Packages.java.lang.System.out;
for(var i = 0; i<jArray.size(); i++)
{
  jOut.println(jArray.get(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" />
</vbox>
 
<!-- The output will look like the following:
One
Two
the status bar here
Three
-->

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"/>
</vbox>

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.

Note:

  • 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  = "youExtId@openwritings.net";// The extension's id from install.rdf(i.e. <em:id>)
var ext = Components.classes["@mozilla.org/extensions/manager;1"]
                    .getService(Components.interfaces.nsIExtensionManager)
                    .getInstallLocation(id)
                    .getItemLocation(id);
 
/*
 * Setting up the full path of the file.
 */
var file = Components.classes["@mozilla.org/file/local;1"]
                     .createInstance(Components.interfaces.nsILocalFile);
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["@mozilla.org/network/file-output-stream;1"]
                         .createInstance(Components.interfaces.nsIFileOutputStream);
 
// See https://developer.mozilla.org/en/PR_Open#Parameters 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);
foStream.close();