Extension development

From MozillaZine Knowledge Base
Revision as of 13:30, 17 April 2005 by Asqueella (talk | contribs) (→‎Releasing your extension: update link)
Jump to navigationJump to search

This page is part of the extension development documentation project.

Ask your questions in MozillaZine Forums. Also try browsing example code.

Note: development documentation is in process of being moved to Mozilla Development Center (MDC).

Introduction

Extensions allow programmers to add new features to Mozilla applications or allow existing features to be modified. Typically, extensions modify the “chrome” of their target application—the user interface and the scripts that add functionalty to that interface. However, it is also possible for extensions to include compiled code in the form of XPCOM components.

Extension technologies

You will almost certainly need to use the following technologies, although it is not necessary to be an expert in them. You may be able to pick up much of what you need just by examining the source code for other extensions.

  • XUL (XML User-Interface Language). Used to define the onscreen layout of the UI and to attach scripts and style to the interface.
  • Javascript. The primary scripting language in Mozilla and the language in which most extensions are written.
  • DOM (Document Object Model). Used to manipulate XUL in real-time as well as any HTML documents loaded.
  • XPCOM/XPConnect. Mozilla packages together useful functions into XPCOM (Cross-Platform Component Object Model) components, which may then be accessed from external code, including Javascript via XPConnect. This allows the extension developers access the preferences database, the filesystem, and many other pieces of Mozilla technology.
  • CSS (Cascading Style Sheets). Used to style the interface and to attach XBL bindings to XUL documents.


More advanced extensions may require the following technologies.

Getting started

Setting up your environment

Before you start doing any development, you should set some preferences to make life easier.

  • javascript.options.showInConsole = true. Logs errors in chrome files to the JavaScript Console to make debugging easier.
  • nglayout.debug.disable_xul_cache = true. Disables the XUL cache so that changes do not require a restart (more).
  • browser.dom.window.dump.enabled = true. Enables the use of the dump() statement to print to the standard console. (The application must be started using the -console flag; read more)
  • javascript.options.strict = true. Enables strict Javascript warnings in the JavaScript Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension.

Also, it is a good idea to install a few developer extensions:

  • The DOM Inspector is useful when you are trying to find the id of XUL elements which you wish to modify.
  • Not really a developer extension, but the JavaScript Console can be surprisingly useful. Open it every time you have made changes to your JS files; it serves as a handy syntax checker (but make sure you have set the preferences listed above).
  • For more advanced Javascript aid, check out Venkman, the Mozilla-based Javascript debugger (project home, latest info).
  • Extension developer's extension for Firefox/Thunderbird/Mozilla (discussion). Includes these tools:
    • JS Shell—execute statements from main application window. Features tab completion!
    • JS Environment—run code snippets
    • XUL Editor—XUL editor with real-time preview
    • HTML Editor—same for HTML
    • Extension Builder—a tool for editing install.rdf, packaging and installing your extension; still under development
    • As a bonus, it can toggle the debugging prefs listed above with a single menu click.

If you are on Windows, you might want to set the environment variable MOZ_NO_REMOTE to 1. This allows you to run multiple profiles with the switch -p so you can have one instance you restart for testing, and only have a debug console attached to that one etc. (More info)

Tutorials

There is a variety of tutorials available which will help with general extension development or with learning specific technologies. You don't have to read all of them before starting hacking.

  • XulPlanet is the premier resource on the internet for XUL and XPCOM. It contains an extensive tutorial which will walk you through XUL.
  • Creating a Mozilla Extension is a document on mozilla.org which walks through the process of creating a simple extension. It has a particularly useful section on XUL Overlays which enable modifications to existing chrome without editing the existing file. However, it has not been yet been updated to cover the new packaging system.
  • roachfiend.com has a HowTo that walks through the entire extension development process. The tutorial is newer and covers creating extensions for newer (post 0.9) Firefox versions. (Some content is Windows specific.)
  • There is a minimal example extension avaliable at yergler.net.
  • Brian Duff's Hello World tutorial.
  • Jonah Bishop's Firefox Toolbar Tutorial — creating toolbar extensions (like WebDeveloper or Googlebar) for Firefox.
  • mozilla-firefox-extension-dev.blogspot.com — various information on extensions development.
  • Signing an XPI by Pete Collins.

Books

As well as web resources, there are a couple of books available describing Mozilla technologies and their usage. Both books cover a comprehensive range of Mozilla technologies. They are available both online and in a more user-friendly dead-tree format.

Getting finished

Packaging

Mozilla.org provides the most comprehensive technical document on packaging extensions. It explains the format of the install.rdf file for those wishing to create one from scratch. However, there also are tools and templates for easier creation of the install.rdf file.

The Extension Manager—and hence the extension/theme packaging system—underwent a major revision with Firefox 0.9 and Thunderbird 0.7. If you wish to support earlier versions of these products, or the Mozilla Suite, you will need to provide the old-style install.js file as well as the new install.rdf.

The whole process for the new packaging system is made clear in roachfiend’s tutorial. The tutorial on XulPlanet covers the old system. (Most of that tutorial applies to new-style extensions too.) Jed Brown also has a tutorial on repackaging old extensions in the new style.

There are also tools which will automatically package your extension files: a bash build script, Windows build script, Googlebar Lite Perl build script.

Releasing your extension

Once you have thoroughly tested your extension, you can release it to the rest of the world!

Further Information

Local resources

Example code

  • Example Code. Common development tasks and techniques.
  • Example Extensions. Extensions that provide a clear demonstration of a particular technique or function.

Coding style

Development fundamentals

Troubleshooting

File locations

  • Chrome URLs. Discover the location within the installation folder of the chrome you wish to overlay.

Other resources

Getting help

  • MozillaZine provides a Development forum which is the place for technical questions and an Extensions forum which occasionally has technical discussion but is more useful for releasing extensions to get testing and feedback.
  • The netscape.public.mozilla newsgroups are the official location for code-related queries. They are particularly useful if you're implementing an XPCOM component or have a question that MozillaZine posters can't answer. See the developer forums page for a description of each newsgroup.
  • IRC (see also this). Live Developers! Get satisfaction online from red hot developers! (Note: this is not a dating service.)

Get involved

  • Take a look at Dev : Project ideas to see the list of requested extensions.
  • Help maintaining the Extension development Knowledge Base. Post your tips and code snippets for others to use. You may use the MozillaZine forums (preferably Development or Extensions) to discuss the tips.
  • Contribute to existing extensions.