Building an extension

  • Revision slug: Building_an_Extension
  • Revision title: Building an extension
  • Revision id: 33551
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 3 words added, 3 words removed

Revision Content

  

Introduction

This tutorial will take you through the steps required to build a very basic extension - one which adds a status bar panel to the Firefox browser containing the text "Hello, World!"

Note This tutorial is about building extensions for Firefox 1.5 and later.  Other tutorials exist for building extensions for earlier versions of Firefox.

For a tutorial on building an extension for Thunderbird, see Building a Thunderbird extension

Setting up the Development Environment

Extensions are packaged and distributed in ZIP files or Bundles, with the XPI (pronounced “zippy”) file extension.

An example of the content within a typical XPI file:

exampleExt.xpi:
              /install.rdf                   
              /components/*  
              /components/cmdline.js                   
              /defaults/
              /defaults/preferences/*.js     
              /plugins/*                        
              /chrome.manifest                
              /chrome/icons/default/*       
              /chrome/
              /chrome/content/
     

We'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your extension somewhere on your hard disk (e.g. C:\extensions\my_extension\ or ~/extensions/my_extension/).  Inside your new extension folder, create another folder called chrome, and inside the chrome folder create a folder called content.

Inside the root directory of your extension folder, create two new empty text files, one called chrome.manifest and the other called install.rdf.

You should end up with this directory structure:

<ext path>\
          install.rdf
          chrome.manifest
          chrome\
             content\

<pre> #!/bin/sh h=$HOME/moExt mkdir -p $h/my_extension/chrome/content touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf </pre> Please read the additional information about setting up your development environment in the article Setting up extension development environment.

Create the Install Manifest

Open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside:

<?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@example.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>1.5</em:minVersion>
        <em:maxVersion>3.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
   
    <!-- Front End MetaData -->
    <em:name>sample</em:name>
    <em:description>A test extension</em:description>
    <em:creator>Your Name Here</em:creator>
    <em:homepageURL>http://www.example.com/</em:homepageURL>
  </Description>      
</RDF>
  • sample@example.net - the ID of the extension.  This is a value you come up with to identify your extension in email address format (note that it should not be your email).  Make it unique.  You could also use a GUID.  NOTE: This parameter MUST be in the format of an email address, although it does NOT have to be a valid email address.  (example.example.example)
  • Specify <em:type>2</em:type> -- the 2 declares that it is installing an extension.  If you were to install a theme it would be 4 (see Install Manifests#type for other type codes).
  • {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - Firefox's application ID.
  • 1.5 - the minimum version of Firefox you're saying this extension will work with.  Set this as the minimum version you're going to commit to testing and fixing bugs with.
  • 3.0.* - the maximum version of Firefox you're saying this extension will work with.  Set this to be no newer than the newest currently available version!  In this case, "3.0.*" indicates that the extension works with Firefox 3.0 and any subsequent 3.0.x release.

Extensions designed to work with Firefox 2.0.0.x at the latest should set the maximum version to "2.0.0.*". Extensions designed to work with Firefox 1.5.0.x at the latest should set the maximum version to "1.5.0.*".

See Install Manifests for a complete listing of the required and optional properties.

Save the file.

Extending the Browser with XUL

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.

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.

XUL Overlays

XUL Overlays are a way of attaching other UI widgets to a XUL document at run time.  A XUL Overlay is a .xul file that specifies XUL fragments to insert at specific merge points within a "master" document.  These fragments can specify widgets to be inserted, removed, or modified.

Example XUL Overlay Document

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

The <statusbar> called status-bar specifies the "merge point" within the browser window that we want to attach to.

The <statusbarpanel> child is a new widget that we want to insert within the merge point.

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

For more information about merging widgets and modifying the user interface using Overlays, see below.

Chrome URIs

XUL files are part of "Chrome Packages" - bundles of user interface components which are loaded via chrome:// URIs.  Rather than load the browser from disk using a file:// URI (since the location of Firefox on the system can change from platform to platform and system to system), Mozilla developers came up with a solution for creating URIs to XUL content that the installed application knows about.

The browser window is: chrome://browser/content/browser.xul. Try typing this URL into the location bar in Firefox!

Chrome URIs consist of several components:

  • Firstly, the URI scheme (chrome) which tells Firefox's networking library that this is a Chrome URI.  It indicates that the content of the URI should be handled as a (chrome).  Compare (chrome) to (http) which tells Firefox to treat the URI as a web page.
  • Secondly, a package name (in the example above, browser) which identifies the bundle of user interface components.  This should be as unique to your application as possible to avoid collisions between extensions.
  • Thirdly, the type of data being requested.  There are three types: content (XUL, JavaScript, XBL bindings, etc. that form the structure and behavior of an application UI), locale (DTD, .properties files etc that contain strings for the UI's localization), and skin (CSS and images that form the theme of the UI)
  • Finally, the path of a file to load.

So, chrome://foo/skin/bar.png  loads the file bar.png from the foo theme's skin section.

When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these URIs into the actual source files on disk (or in JAR packages).

Create a Chrome Manifest

For more information on Chrome Manifests and the properties they support, see the Chrome Manifest Reference.

Open the file called chrome.manifest that you created alongside the chrome directory at the root of your extension's source folder hierarchy.

Add in this code:

content     sample    chrome/content/

(Don't forget the trailing slash, "/"! Without it, the package won't be registered.)

This specifies the:

  1. type of material within a chrome package
  2. name of the chrome package (make sure you use all lowercase characters for the package name ("sample") as Firefox/Thunderbird doesn't support mixed/camel case in version 2 and earlier - {{ Bug("132183") }})
  3. location of the chrome packages' files

So, this line says that for a chrome package sample, we can find its content files at the location chrome/content which is a path relative to the location of chrome.manifest.

Note that content, locale and skin files must be kept inside folders called content, locale and skin within your chrome subdirectory.

Save the file. When you launch Firefox with your extension, (later in this tutorial), this will register the chrome package.

Register an Overlay

You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your chrome.manifest file:

overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

This tells Firefox to merge sample.xul into browser.xul when browser.xul loads.

Test

First, we need to tell Firefox about your extension. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the extension, and it'll load it up every time you restart Firefox.

  1. Locate your default profile folder. Your default profile folder is somewhere underneath the Profile Folder, for example under the Firefox/Profiles/<profile_id>.default/ subfolder.
  2. Open the extensions folder. You should already have one if you have any extension installed. Create one if it doesn't exist.
  3. Create a new text file, and put the path to your development folder inside, e.g. C:\extensions\my_extension\ or ~/extensions/my_extension/. Save the file with the id of your extension as its name, e.g. sample@example.net

(Don't forget the trailing slash, "/"! Without it, the extension won't get registered.)

(my_extension may not work! Redirect seems to break if the folder name contains an underscore.)

Now you're ready to test your extension!

Start Firefox. Firefox will detect the text link to your extension directory and install the Extension. When the browser window appears you should see the text "Hello, World!" on the right side of the status bar panel.

You can now go back and make changes to the .xul file, close and restart Firefox and they should appear.

Package

Now that your extension works, you can package it for deployment and installation.

Zip up the contents of your extension's folder (not the extension folder itself), and rename the zip file to have a .xpi extension. In Windows XP, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -> Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!

On Mac OS X, you can right-click on the contents of the extension's folder and choose "Create Archive of..." to make the zip file. However, since Mac OS X adds hidden files to folders in order to track file metadata, you should instead use the Terminal, delete the hidden files (whose names begin with a period), and then use the zip command on the command line to create the zip file.

On Linux, you would likewise use the command-line zip tool.

If you have the 'Extension Builder' extension installed it can compile the .xpi file for you (Tools -> Extension Developer -> Extension Builder). Merely navigate to the directory where your extension is (install.rdf etc.), and hit the Build Extension button. This extension has a slew of tools to make development easier.

Now upload the .xpi file to your server, making sure it's served as application/x-xpinstall. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the extensions window via Tools -> Extensions in Firefox 1.5.0.x, or Tools -> Add-ons in later versions.

Installing from a web page

There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the InstallTrigger method to install XPIs, as it provides the best experience to users.

Using addons.mozilla.org

Mozilla Add-ons is a distribution site where you can host your extension for free. Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition Mozilla Add-ons allows users to comment and provide feedback on your extension. It is highly recommended that you use Mozilla Add-ons to distribute your extensions!

Visit http://addons.mozilla.org/developers/ to create an account and begin distributing your extensions!

Note: Your Extension will be passed faster and downloaded more if you have a good description and some screenshots of the extension in action.

Registering Extensions in the Windows Registry

On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the applications starts. This allows application installers to easily add integration hooks as extensions. See Adding Extensions using the Windows Registry for more information.

More on XUL Overlays

In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:

  • Modify attributes on the merge point, e.g. <statusbar id="status-bar" hidden="true" /> (hides the status bar)
  • Remove the merge point from the master document, e.g. <statusbar id="status-bar" removeelement="true" />
  • Control the position of the inserted widgets:
<statusbarpanel position="1" .../>

<statusbarpanel insertbefore="other-id" .../>

<statusbarpanel insertafter="other-id" .../>

Creating New User Interface Components

You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors etc.

View the XUL documentation for more resources for XUL developers.

Defaults Files

Defaults files that you use to seed a user's profile with should be placed in defaults/ under the root of your extension's folder hierarchy. Default preferences .js files should be stored in defaults/preferences/ - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the Preferences API.

An example default preference file:

pref("extensions.sample.username", "Joe"); //a string pref
pref("extensions.sample.sort", 2); //an int pref
pref("extensions.sample.showAdvanced", true); //a boolean pref

XPCOM Components

Firefox supports XPCOM components in extensions. You can create your own components easily in JavaScript or in C++ (using the Gecko SDK).

Place all of your .js or .dll files in the components/ directory - they are automatically registered the first time Firefox runs after your extension is installed.

For more information see How to Build an XPCOM Component in Javascript, How to build a binary XPCOM component using Visual Studio and the Creating XPCOM Components book.

Application Command Line

One of the possible uses of custom XPCOM components is adding a command line handler to Firefox or Thunderbird. You can use this technique to run your extension as an application:

 firefox.exe -myapp

I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag(). See Chrome: Command Line and a forum discussion for details.

Localization

To support more than one language, you should separate strings from your content using entities and string bundles. It is much easier to do this while you are developing your extension, rather than come back and do it later!

Localization information is stored in the locale directory for the extension. For example, to add a locale to our sample extension, create a directory named "locale" in chrome (where the "content" directory is located) and add the following line to the chrome.manifest file:

locale sample en-US chrome/locale/en-US/

To create localizable attribute values in XUL, you put the values in a .ent (or a .dtd) file, which should be placed in the locale directory and looks like this:

<!ENTITY  button.label     "Click Me!">
<!ENTITY  button.accesskey "C">

And then include it at the top of your XUL document (but underneath the "<?xml version"1.0"?>") like so:

<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">

where window is the localName value of the root element of the XUL document, and the value of the SYSTEM property is the chrome URI to the entity file. For our sample extension, the root element is overlay.

To use the entities, modify your XUL to look like this:

<button label="&button.label;" accesskey="&button.accesskey;"/>

The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.

For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:

key=value

and then use nsIStringBundleService/nsIStringBundle or the <stringbundle> tag to load the values into script.

Understanding the Browser

Use the DOM Inspector to inspect the browser window or any other XUL window you want to extend.

Note: DOM Inspector is not part of the Standard Firefox installation. Since Firefox 3 Beta 4, the DOM Inspector has been available from Firefox Add-ons as a standalone extension. For earlier versions, you must reinstall with the Custom install path and choose DOM Inspector (or Developer Tools in Firefox 1.5) if there is not a "DOM Inspector" item in your browser's Tools menu.

Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on.

Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the load event fires on the master XUL window.

Debugging Extensions

Analytical Tools for Debugging

  • The DOM Inspector - inspect attributes, DOM structure, CSS style rules that are in effect (e.g. find out why your style rules don't seem to be working for an element - an invaluable tool!)
  • Venkman - set breakpoints in JavaScript and inspect call stacks
  • arguments.callee.caller in JavaScript - access a function's call stack

printf debugging

Advanced debugging

Quick Start

You can use the Extension Wizard online tool to generate a simple extension to work with.

A Hello World extension similar to what you can generate with the Extension Wizard is explained line-by-line in another tutorial from MozillaZine Knowledge Base.

Further information

{{ languages( { "de": "de/Erweiterung_erstellen", "es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Sviluppare_un\'Estensione", "ru": "ru/\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f", "zh-cn": "cn/\u6784\u5efa\u4e00\u4e2a\u6269\u5c55" } ) }}

Revision Source

<p>  </p>
<h4 name="Introduction">Introduction</h4>
<p>This tutorial will take you through the steps required to build a very basic <a href="/en/Extensions" title="en/Extensions">extension</a> - one which adds a status bar panel to the Firefox browser containing the text "Hello, World!"</p>
<div class="note">
<p><strong>Note</strong> This tutorial is about building extensions for Firefox 1.5 and later.  Other tutorials exist for building extensions for earlier versions of Firefox.</p>
<p>For a tutorial on building an extension for Thunderbird, see <a href="/en/Building_a_Thunderbird_extension" title="en/Building_a_Thunderbird_extension">Building a Thunderbird extension</a></p>
</div>
<h4 name="Setting_up_the_Development_Environment">Setting up the Development Environment</h4>
<p>Extensions are packaged and distributed in ZIP files or <a href="/en/Bundles" title="en/Bundles">Bundles</a>, with the <code>XPI</code> (<em>pronounced “zippy”</em>) file extension.</p>
<p>An example of the content within a typical XPI file:</p>
<pre class="eval">exampleExt.xpi:
              /<a href="/en/Install_Manifests" title="en/Install_Manifests">install.rdf</a>                   
              <a href="#XPCOM_Components">/components/*</a>  
              <a href="#Application_Command_Line">/components/cmdline.js</a>                   
              <a href="#Defaults_Files">/defaults/</a>
              <a href="#Defaults_Files">/defaults/preferences/*.js</a>     
              /plugins/*                        
              /<a href="/en/Chrome_Registration" title="en/Chrome_Registration">chrome.manifest</a>                
              /<a href="/en/Window_icons" title="en/Window_icons">chrome/icons/default/*</a>       
              /chrome/
              /chrome/content/
     
</pre>
<p>We'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your extension somewhere on your hard disk (e.g. <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/</code>).  Inside your new extension folder, create another folder called <code>chrome</code>, and inside the <code>chrome</code> folder create a folder called <code>content</code>.</p>
<p>Inside the <strong>root</strong> directory of your extension folder, create two new empty text files, one called <code>chrome.manifest</code> and the other called <code>install.rdf</code>.</p>
<p>You should end up with this directory structure:</p>
<pre>&lt;ext path&gt;\
          install.rdf
          chrome.manifest
          chrome\
             content\
</pre>
<p><span class="comment">&lt;pre&gt; #!/bin/sh h=$HOME/moExt mkdir -p $h/my_extension/chrome/content touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf &lt;/pre&gt;</span> Please read the additional information about setting up your development environment in the article <a href="/en/Setting_up_extension_development_environment" title="en/Setting_up_extension_development_environment">Setting up extension development environment</a>.</p>
<h4 name="Create_the_Install_Manifest">Create the Install Manifest</h4>
<p>Open the file called <code><a href="/en/Install_Manifests" title="en/Install_Manifests">install.rdf</a></code> that you created at the top of your extension's folder hierarchy and put this inside:</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;

&lt;RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
     xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"&gt;

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:id&gt;<strong><a class=" link-mailto" href="mailto:sample@example.net" rel="freelink">sample@example.net</a></strong>&lt;/em:id&gt;
    &lt;em:version&gt;<strong>1.0</strong>&lt;/em:version&gt;
    &lt;em:type&gt;2&lt;/em:type&gt;
   
    &lt;!-- Target Application this extension can install into, 
         with minimum and maximum supported versions. --&gt; 
    &lt;em:targetApplication&gt;
      &lt;Description&gt;
        &lt;em:id&gt;<strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong>&lt;/em:id&gt;
        &lt;em:minVersion&gt;<strong>1.5</strong>&lt;/em:minVersion&gt;
        &lt;em:maxVersion&gt;<strong>3.0.*</strong>&lt;/em:maxVersion&gt;
      &lt;/Description&gt;
    &lt;/em:targetApplication&gt;
   
    &lt;!-- Front End MetaData --&gt;
    &lt;em:name&gt;<strong>sample</strong>&lt;/em:name&gt;
    &lt;em:description&gt;<strong>A test extension</strong>&lt;/em:description&gt;
    &lt;em:creator&gt;<strong>Your Name Here</strong>&lt;/em:creator&gt;
    &lt;em:homepageURL&gt;<strong><span class="nowiki">http://www.example.com/</span></strong>&lt;/em:homepageURL&gt;
  &lt;/Description&gt;      
&lt;/RDF&gt;
</pre>
<ul> <li><strong><a class=" link-mailto" href="mailto:sample@example.net" rel="freelink">sample@example.net</a></strong> - the ID of the extension.  This is a value you come up with to identify your extension in email address format (note that it should not be <em>your</em> email).  Make it unique.  You could also use a GUID.  NOTE: This parameter MUST be in the format of an email address, although it does NOT have to be a valid email address.  (example.example.example)</li> <li>Specify <code>&lt;em:type&gt;2&lt;/em:type&gt;</code> -- the 2 declares that it is installing an extension.  If you were to install a theme it would be 4 (see <a href="/en/Install_Manifests#type" title="en/Install_Manifests#type">Install Manifests#type</a> for other type codes).</li> <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Firefox's application ID.</li> <li><strong>1.5</strong> - the minimum version of Firefox you're saying this extension will work with.  Set this as the minimum version you're going to commit to testing and fixing bugs with.</li> <li><strong>3.0.*</strong> - the maximum version of Firefox you're saying this extension will work with.  Set this to be no newer than the newest currently available version!  In this case, "3.0.*" indicates that the extension works with Firefox 3.0 and any subsequent 3.0.x release.</li>
</ul>
<p>Extensions designed to work with Firefox 2.0.0.x at the latest should set the maximum version to "2.0.0.*". Extensions designed to work with Firefox 1.5.0.x at the latest should set the maximum version to "1.5.0.*".</p>
<p>See <a href="/en/Install_Manifests" title="en/Install_Manifests">Install Manifests</a> for a complete listing of the required and optional properties.</p>
<p>Save the file.</p>
<h4 name="Extending_the_Browser_with_XUL">Extending the Browser with XUL</h4>
<p>Firefox's user interface is written in XUL and JavaScript.  <a href="/en/XUL" title="en/XUL">XUL</a> is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc.  User actions are bound to functionality using JavaScript.</p>
<p>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.</p>
<p>The browser is implemented in a XUL file called <code>browser.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code> contains <code>content/browser/browser.xul</code>).  In browser.xul we can find the status bar, which looks something like this:</p>
<pre class="eval">&lt;statusbar id="status-bar"&gt;
 ... &lt;statusbarpanel&gt;s ...
&lt;/statusbar&gt;
</pre>
<p><code>&lt;statusbar id="status-bar"&gt;</code> is a "merge point" for a XUL Overlay.</p>
<h5 name="XUL_Overlays">XUL Overlays</h5>
<p><a href="/en/XUL_Overlays" title="en/XUL_Overlays">XUL Overlays</a> are a way of attaching other UI widgets to a XUL document at run time.  A XUL Overlay is a .xul file that specifies XUL fragments to insert at specific merge points within a "master" document.  These fragments can specify widgets to be inserted, removed, or modified.</p>
<p><strong>Example XUL Overlay Document</strong></p>
<pre class="eval">&lt;?xml version="1.0"?&gt;
&lt;overlay id="sample" 
         xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
 &lt;statusbar id="<strong>status-bar</strong>"&gt;
  &lt;statusbarpanel id="my-panel" label="Hello, World"/&gt;
 &lt;/statusbar&gt;
&lt;/overlay&gt;
</pre>
<p>The <code>&lt;statusbar&gt;</code> called <code><strong>status-bar</strong></code> specifies the "merge point" within the browser window that we want to attach to.</p>
<p>The <code>&lt;statusbarpanel&gt;</code> child is a new widget that we want to insert within the merge point.</p>
<p>Take this sample code above and save it into a new file called <code><strong>sample.xul</strong></code> inside the <code>chrome/content</code> folder you created.</p>
<p>For more information about merging widgets and modifying the user interface using Overlays, see below.</p>
<h4 name="Chrome_URIs">Chrome URIs</h4>
<p>XUL files are part of "<a href="/en/Chrome_Registration" title="en/Chrome_Registration">Chrome Packages</a>" - bundles of user interface components which are loaded via <code><a class=" external" href="chrome://" rel="freelink">chrome://</a></code> URIs.  Rather than load the browser from disk using a <code><a class=" external" href="file://" rel="freelink">file://</a></code> URI (since the location of Firefox on the system can change from platform to platform and system to system), Mozilla developers came up with a solution for creating URIs to XUL content that the installed application knows about.</p>
<p>The browser window is: <code><a class=" external" href="chrome://browser/content/browser.xul" rel="freelink">chrome://browser/content/browser.xul</a></code>. Try typing this URL into the location bar in Firefox!</p>
<p>Chrome URIs consist of several components:</p>
<ul> <li>Firstly, the <strong>URI scheme</strong> (<code>chrome</code>) which tells Firefox's networking library that this is a Chrome URI.  It indicates that the content of the URI should be handled as a (<code>chrome</code>).  Compare (<code>chrome</code>) to (<code>http</code>) which tells Firefox to treat the URI as a web page.</li> <li>Secondly, a package name (in the example above, <code><strong>browser</strong></code>) which identifies the bundle of user interface components.  This should be as unique to your application as possible to avoid collisions between extensions.</li> <li>Thirdly, the type of data being requested.  There are three types: <code>content</code> (XUL, JavaScript, XBL bindings, etc. that form the structure and behavior of an application UI), <code>locale</code> (DTD, .properties files etc that contain strings for the UI's <a href="/en/Localization" title="en/Localization">localization</a>), and <code>skin</code> (CSS and images that form the <a href="/en/Themes" title="en/Themes">theme</a> of the UI)</li> <li>Finally, the path of a file to load.</li>
</ul>
<p>So, <code><a class=" external" href="chrome://foo/skin/bar.png" rel="freelink">chrome://foo/skin/bar.png</a></code>  loads the file <code>bar.png</code> from the <code>foo</code> theme's <code>skin</code> section.</p>
<p>When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these URIs into the actual source files on disk (or in JAR packages).</p>
<h4 name="Create_a_Chrome_Manifest">Create a Chrome Manifest</h4>
<p>For more information on Chrome Manifests and the properties they support, see the <a href="/en/Chrome_Registration" title="en/Chrome_Registration">Chrome Manifest</a> Reference.</p>
<p>Open the file called <strong>chrome.manifest</strong> that you created alongside the <code>chrome</code> directory at the root of your extension's source folder hierarchy.</p>
<p>Add in this code:</p>
<pre class="eval">content     sample    chrome/content/
</pre>
<p>(<strong>Don't forget the trailing slash, "<code>/</code>"!</strong> Without it, the package won't be registered.)</p>
<p>This specifies the:</p>
<ol> <li>type of material within a chrome package</li> <li>name of the chrome package (make sure you use all lowercase characters for the package name ("sample") as Firefox/Thunderbird doesn't support mixed/camel case in version 2 and earlier - {{ Bug("132183") }})</li> <li>location of the chrome packages' files</li>
</ol>
<p>So, this line says that for a chrome package <strong>sample</strong>, we can find its <strong>content</strong> files at the location <code>chrome/content</code> which is a path relative to the location of <code>chrome.manifest</code>.</p>
<p>Note that content, locale and skin files must be kept inside folders called content, locale and skin within your <code>chrome</code> subdirectory.</p>
<p>Save the file. When you launch Firefox with your extension, (later in this tutorial), this will register the chrome package.</p>
<h4 name="Register_an_Overlay">Register an Overlay</h4>
<p>You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your <code>chrome.manifest</code> file:</p>
<pre class="eval">overlay <a class=" external" href="chrome://browser/content/browser.xul" rel="freelink">chrome://browser/content/browser.xul</a> <a class=" external" href="chrome://sample/content/sample.xul" rel="freelink">chrome://sample/content/sample.xul</a>
</pre>
<p>This tells Firefox to merge <code>sample.xul</code> into <code>browser.xul</code> when <code>browser.xul</code> loads.</p>
<h4 name="Test">Test</h4>
<p>First, we need to tell Firefox about your extension. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the extension, and it'll load it up every time you restart Firefox.</p>
<ol> <li>Locate your default profile folder. Your default profile folder is somewhere underneath the <a class="external" href="http://kb.mozillazine.org/Profile_folder">Profile Folder</a>, for example under the <code>Firefox/Profiles/&lt;profile_id&gt;.default/</code> subfolder.</li> <li>Open the <strong>extensions</strong> folder. You should already have one if you have any extension installed. Create one if it doesn't exist.</li> <li>Create a new text file, and put the path to your development folder inside, e.g. <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/</code>. Save the file with the id of your extension as its name, e.g. <code><a class=" link-mailto" href="mailto:sample@example.net" rel="freelink">sample@example.net</a></code></li>
</ol>
<p>(<strong>Don't forget the trailing slash, "<code>/</code>"!</strong> Without it, the extension won't get registered.)</p>
<p>(<strong>my_extension may not work!</strong> Redirect seems to break if the folder name contains an underscore.)</p>
<p>Now you're ready to test your extension!</p>
<p>Start Firefox. Firefox will detect the text link to your extension directory and install the Extension. When the browser window appears you should see the text "Hello, World!" on the right side of the status bar panel.</p>
<p>You can now go back and make changes to the .xul file, close and restart Firefox and they should appear.</p>
<h4 name="Package">Package</h4>
<p>Now that your extension works, you can <a href="/en/Extension_Packaging" title="en/Extension_Packaging">package</a> it for deployment and installation.</p>
<p>Zip up the <strong>contents</strong> of your extension's folder (not the extension folder itself), and rename the zip file to have a .xpi extension. In Windows XP, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -&gt; Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!</p>
<p>On Mac OS X, you can right-click on the <strong>contents</strong> of the extension's folder and choose "Create Archive of..." to make the zip file. However, since Mac OS X adds hidden files to folders in order to track file metadata, you should instead use the Terminal, delete the hidden files (whose names begin with a period), and then use the <code>zip</code> command on the command line to create the zip file.</p>
<p>On Linux, you would likewise use the command-line zip tool.</p>
<p>If you have the 'Extension Builder' extension installed it can compile the .xpi file for you (Tools -&gt; Extension Developer -&gt; Extension Builder). Merely navigate to the directory where your extension is (install.rdf etc.), and hit the Build Extension button. This extension has a slew of tools to make development easier.</p>
<p>Now upload the .xpi file to your server, making sure it's served as <code>application/x-xpinstall</code>. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the extensions window via Tools -&gt; Extensions in Firefox 1.5.0.x, or Tools -&gt; Add-ons in later versions.</p>
<h5 name="Installing_from_a_web_page">Installing from a web page</h5>
<p>There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the <a href="/en/Installing_Extensions_and_Themes_From_Web_Pages" title="en/Installing_Extensions_and_Themes_From_Web_Pages"> InstallTrigger method</a> to install XPIs, as it provides the best experience to users.</p>
<h5 name="Using_addons.mozilla.org">Using addons.mozilla.org</h5>
<p>Mozilla Add-ons is a distribution site where you can host your extension for free. Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition Mozilla Add-ons allows users to comment and provide feedback on your extension. It is highly recommended that you use Mozilla Add-ons to distribute your extensions!</p>
<p>Visit <a class=" external" href="http://addons.mozilla.org/developers/" rel="freelink">http://addons.mozilla.org/developers/</a> to create an account and begin distributing your extensions!</p>
<p><em>Note:</em> Your Extension will be passed faster and downloaded more if you have a good description and some screenshots of the extension in action.</p>
<h5 name="Registering_Extensions_in_the_Windows_Registry">Registering Extensions in the Windows Registry</h5>
<p>On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the applications starts. This allows application installers to easily add integration hooks as extensions. See <a href="/en/Adding_Extensions_using_the_Windows_Registry" title="en/Adding_Extensions_using_the_Windows_Registry">Adding Extensions using the Windows Registry</a> for more information.</p>
<h4 name="More_on_XUL_Overlays">More on XUL Overlays</h4>
<p>In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:</p>
<ul> <li>Modify attributes on the merge point, e.g. <code>&lt;statusbar id="status-bar" hidden="true" /&gt;</code> (hides the status bar)</li> <li>Remove the merge point from the master document, e.g. <code>&lt;statusbar id="status-bar" removeelement="true" /&gt;</code></li> <li>Control the position of the inserted widgets:</li>
</ul>
<pre class="eval">&lt;statusbarpanel position="1" .../&gt;

&lt;statusbarpanel insertbefore="other-id" .../&gt;

&lt;statusbarpanel insertafter="other-id" .../&gt;
</pre>
<h4 name="Creating_New_User_Interface_Components">Creating New User Interface Components</h4>
<p>You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors etc.</p>
<p>View the <a href="/en/XUL" title="en/XUL">XUL</a> documentation for more resources for XUL developers.</p>
<h4 name="Defaults_Files">Defaults Files</h4>
<p>Defaults files that you use to seed a user's profile with should be placed in <code>defaults/</code> under the root of your extension's folder hierarchy. Default preferences .js files should be stored in <code>defaults/preferences/</code> - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the <a href="/en/Preferences_API" title="en/Preferences_API">Preferences API</a>.</p>
<p>An example default preference file:</p>
<pre class="eval">pref("extensions.sample.username", "Joe"); //a string pref
pref("extensions.sample.sort", 2); //an int pref
pref("extensions.sample.showAdvanced", true); //a boolean pref
</pre>
<h4 name="XPCOM_Components">XPCOM Components</h4>
<p>Firefox supports <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> components in extensions. You can create your own components easily in JavaScript or in C++ (using the <a href="/en/Gecko_SDK" title="en/Gecko_SDK">Gecko SDK</a>).</p>
<p>Place all of your .js or .dll files in the <code>components/</code> directory - they are automatically registered the first time Firefox runs after your extension is installed.</p>
<p>For more information see <a href="/en/How_to_Build_an_XPCOM_Component_in_Javascript" title="en/How_to_Build_an_XPCOM_Component_in_Javascript">How to Build an XPCOM Component in Javascript</a>, <a href="/en/How_to_build_a_binary_XPCOM_component_using_Visual_Studio" title="en/How_to_build_a_binary_XPCOM_component_using_Visual_Studio">How to build a binary XPCOM component using Visual Studio</a> and the <a href="/en/Creating_XPCOM_Components" title="en/Creating_XPCOM_Components">Creating XPCOM Components</a> book.</p>
<h5 name="Application_Command_Line">Application Command Line</h5>
<p>One of the possible uses of custom XPCOM components is adding a command line handler to Firefox or Thunderbird. You can use this technique to run your extension as an application:</p>
<pre class="eval"> firefox.exe -myapp
</pre>
<p><span class="comment">I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag().</span> See <a href="/en/Chrome/Command_Line" title="en/Chrome/Command_Line">Chrome: Command Line</a> and a <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">forum discussion</a> for details.</p>
<h4 name="Localization">Localization</h4>
<p>To support more than one language, you should separate strings from your content using <a href="/en/XUL_Tutorial/Localization" title="en/XUL_Tutorial/Localization">entities</a> and <a href="/en/XUL_Tutorial/Property_Files" title="en/XUL_Tutorial/Property_Files">string bundles</a>. It is much easier to do this while you are developing your extension, rather than come back and do it later!</p>
<p>Localization information is stored in the locale directory for the extension. For example, to add a locale to our sample extension, create a directory named "locale" in chrome (where the "content" directory is located) and add the following line to the chrome.manifest file:</p>
<pre class="eval">locale sample en-US chrome/locale/en-US/
</pre>
<p>To create localizable attribute values in XUL, you put the values in a <code>.ent</code> (or a <code>.dtd</code>) file, which should be placed in the locale directory and looks like this:</p>
<pre class="eval">&lt;!ENTITY  button.label     "Click Me!"&gt;
&lt;!ENTITY  button.accesskey "C"&gt;
</pre>
<p>And then include it at the top of your XUL document (but underneath the "&lt;?xml version"1.0"?&gt;") like so:</p>
<pre class="eval">&lt;!DOCTYPE <strong>window</strong> SYSTEM "<a class=" external" href="chrome://packagename/locale/filename.ent" rel="freelink">chrome://packagename/locale/filename.ent</a>"&gt;
</pre>
<p>where <code><strong>window</strong></code> is the <code><a href="/en/DOM/element.localName" title="en/DOM/element.localName">localName</a></code> value of the root element of the XUL document, and the value of the <code>SYSTEM</code> property is the chrome URI to the entity file. For our sample extension, the root element is <code><strong>overlay</strong></code>.</p>
<p>To use the entities, modify your XUL to look like this:</p>
<pre class="eval">&lt;button label="&amp;button.label;" accesskey="&amp;button.accesskey;"/&gt;
</pre>
<p>The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.</p>
<p>For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:</p>
<pre class="eval">key=value
</pre>
<p>and then use <code><a href="/en/NsIStringBundleService" title="en/NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/en/nsIStringBundle" title="en/nsIStringBundle">nsIStringBundle</a></code> or the <code><a class="external" href="http://xulplanet.com/references/elemref/ref_stringbundle.html">&lt;stringbundle&gt;</a></code> tag to load the values into script.</p>
<h4 name="Understanding_the_Browser">Understanding the Browser</h4>
<p>Use the <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> to inspect the browser window or any other XUL window you want to extend.</p>
<p><strong>Note:</strong> <strong>DOM Inspector</strong> is not part of the <strong>Standard</strong> Firefox installation. Since Firefox 3 Beta 4, the DOM Inspector has been available from <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">Firefox Add-ons</a> as a standalone extension. For earlier versions, you must reinstall with the Custom install path and choose <strong>DOM Inspector</strong> (or <strong>Developer Tools</strong> in Firefox 1.5) if there is not a "DOM Inspector" item in your browser's Tools menu.</p>
<p>Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on.</p>
<p>Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the <code>load</code> event fires on the master XUL window.</p>
<h4 name="Debugging_Extensions">Debugging Extensions</h4>
<p><strong>Analytical Tools for Debugging</strong></p>
<ul> <li>The <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> - inspect attributes, DOM structure, CSS style rules that are in effect (e.g. find out why your style rules don't seem to be working for an element - an invaluable tool!)</li> <li><a href="/en/Venkman" title="en/Venkman">Venkman</a> - set breakpoints in JavaScript and inspect call stacks</li> <li><code><a href="/en/Core_JavaScript_1.5_Reference/Functions/arguments/callee" title="en/Core_JavaScript_1.5_Reference/Functions/arguments/callee">arguments.callee</a>.<a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Function/caller" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/caller">caller</a></code> in JavaScript - access a function's call stack</li>
</ul>
<p><strong>printf debugging</strong></p>
<ul> <li>Use <code><a href="/en/DOM/window.dump" title="en/DOM/window.dump">dump</a>("string")</code> (see the link for details; this requires a bit of configuration to work properly)</li> <li>Use <code><a href="/en/Components.utils.reportError" title="en/Components.utils.reportError">Components.utils.reportError()</a></code> or <code><a href="/en/nsIConsoleService" title="en/nsIConsoleService">nsIConsoleService</a></code> to log to the JavaScript console</li>
</ul>
<p><strong>Advanced debugging</strong></p>
<ul> <li>Run a debug Firefox build and set breakpoints in Firefox itself, or your C++ components. For the experienced developer, this is often the fastest way to diagnose a problem. See <a href="/en/Build_Documentation" title="en/Build_Documentation">Build Documentation</a> and <a href="/en/Developing_Mozilla" title="en/Developing_Mozilla">Developing Mozilla</a> for more information.</li> <li>See <a href="/en/Debugging_a_XULRunner_Application" title="en/Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a> for more helpful tips.</li>
</ul>
<h3 name="Quick_Start">Quick Start</h3>
<p>You can use the <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> online tool to generate a simple extension to work with.</p>
<p>A <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World extension</a> similar to what you can generate with the Extension Wizard is explained line-by-line in <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">another tutorial from MozillaZine Knowledge Base</a>.</p>
<h3 name="Further_information">Further information</h3>
<ul> <li><a href="/en/Extension_Frequently_Asked_Questions" title="en/Extension_Frequently_Asked_Questions">Extension FAQ</a></li> <li><a href="/en/Extensions" title="en/Extensions">Extensions</a></li>
</ul>
<p>{{ languages( { "de": "de/Erweiterung_erstellen", "es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Sviluppare_un\'Estensione", "ru": "ru/\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f", "zh-cn": "cn/\u6784\u5efa\u4e00\u4e2a\u6269\u5c55" } ) }}</p>
Revert to this revision