Skip to main content

Getting started with extension development - MozillaZine Know...

Popularity Report

Total Popularity Score: 0
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Bookmark History

Saved by 33 people (10 private), first by anonymouse user on 2006-03-02


Public Comment

on 2006-07-31 by ziller

This article describes steps needed to get started with extensions development.

Public Sticky notes

Two new major extension developers' features introduced in Firefox 1.5 are the greatly simplified chrome registration scheme and reworked Extension Manager. It is now even easier to start writing extensions than it was before.

Highlighted by ktenney

Setting up your environment

Highlighted by monabili

In particular, you must set the javascript.options.showInConsole pref to true.

Highlighted by monabili

What this Extension Does

Highlighted by monabili

For further instructions, see Setting up extension development environment. Do read that page, it will save you many hours when developing and debugging your extension. In particular, you must set the javascript.options.showInConsole pref to true.

Highlighted by pedersenryan

Planning your extension

Highlighted by monabili

FilenamePurpose chrome.manifestTells Firefox where your chrome files are and what to do with them install.rdfThe description file for your extension ("Install manifest") overlay.xulThe file describing UI elements to add to the browser window overlay.jsThe file with scripts to run in the browser window overlay.dtdContains translation for text string codes in overlay.xul hello.dtdContains translation for the strings in hello.xul overlay.cssLets you adjust appearance of UI elements with CSS hello.xulThe file describing the UI of the new window helloworld@mozilla.doslash.orgA pointer to your extension files

Highlighted by mayabelle

Creating stub extension files

Highlighted by monabili

UI ("chrome")

Highlighted by monabili

behavior by providing overlays to already existent windows/documents.

Highlighted by monabili

f you didn't know that, we advise you to read XUL Structure chapter from XULPlanet's XUL Tutorial and Configurable Chrome document).

Highlighted by monabili

You can download the ZIP file with all necessary stub files and appropriate folder structure

Highlighted by mayabelle

Create the following structure in the folder where you intend to develop your project: 

helloworld/
  chrome.manifest
  install.rdf
  content/
    overlay.js
    overlay.xul
    hello.xul
  locale/
    en-US/
      overlay.dtd
      hello.dtd
  skin/
      overlay.css

The folders are traditionally named "content", "locale" and "skin", and you should follow the tradition. You may call the files inside those folders whatever you want (except chrome.manifest and install.rdf).

Highlighted by mayabelle

1
2
3
4
5
6
7

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

locale helloworld en-US locale/en-US/

skin helloworld classic/1.0 skin/
style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css

What each line of the file does:

  • Line 1 registers a content provider: it maps the contents of chrome://helloworld/content/ to the content folder.
  • Line 2 registers an overlay for chrome://browser/content/browser.xul location, allowing you to modify Firefox's main window UI from your overlay.xul file.
  • Line 4 registers a en-US locale provider.
  • Line 6 registers a default skin provider.
  • Line 7 applies your overlay.css style file to chrome://global/content/customizeToolbar.xul document (used, for example, when creating toolbar buttons). You could instead register an overlay and include the stylesheet in the overlay using the <?xml-stylesheet?> processing instruction.

Highlighted by mayabelle

chrome.manifest

Highlighted by mayabelle

Don't forget the end slash at the end of the paths : "content/" works, whereas "content" doesn't

Highlighted by mayabelle

overlay.xul is a simple XUL overlay

Highlighted by mayabelle

overlay.xul

Highlighted by mayabelle

JavaScript files are used to define application's behavior

Highlighted by mayabelle

you should use unique names for global identifiers in your extensions to avoid clashing with other extensions. It's usually accomplished by prefixing all global identifiers with the name of your extension or by putting most/all of your variables and functions in an object with an unique name.

Highlighted by mayabelle

overlay.js

Highlighted by mayabelle

DTD files are used to make XUL/XBL/XHTML and other XML files in Mozilla chrome localizable. Basically, instead of hard-coding the strings in your XUL file, you use XML entities, which expand to the values declared in the DTD file referenced at the top of the XUL file.

It makes your extension localizable, because there may be a few different locale providers for your extension, and Mozilla is able to choose between them at run-time.

Highlighted by mayabelle

This is the file for the new window.

Highlighted by mayabelle

overlay.dtd

Highlighted by mayabelle

DTD files used for localization purposes consist of entity declarations like the one below:

Highlighted by vinaykr

In addition to modifying existing windows, you can create new windows for your extensions. The UI of your own windows is also described in XUL files, but unlike overlays, the root element is a <window> or a <dialog>, and not <overlay>. Another difference from overlays is that you don't have to register each of new windows in chrome.manifest.

Highlighted by mayabelle

hello.dtd

Highlighted by mayabelle

hello.xul

Highlighted by mayabelle

install.rdf

Highlighted by mayabelle

overlay.css is used by Firefox to apply a specific look to the extension component(s) you are installing

Highlighted by mayabelle

With Firefox closed, create a "pointer" file with the same name as your extension's ID in profile folder/extensions/ and edit it so that it contains the path to your folder containing install.rdf and chrome.manifest files.

Highlighted by mayabelle

Registering your extension in the Extension Manager

Highlighted by monabili

overlay.css

Highlighted by mayabelle

As it was mentioned, the folder structure and chrome.manifest file must be changed before packaging. Compare:

Highlighted by mayabelle