It’s been a while since we published a guide on extension development in this blog, and we recently discovered that many of you are hitting a very old blog post about it. There’s plenty of documentation out there, but it can be hard to find, so here’s an overview of what you need to know about extension development.

As with everything Mozilla, the first place you should look for developer documentation is the Mozilla Developer Network. There’s an add-ons section there where you will find everything you need to know about how to develop Firefox extensions, as well as other add-on types.

There are a couple different ways to go about creating an extension for Firefox, so I covered each of the sections below.

Add-ons SDK extensions

The Add-ons SDK is a set of simple APIs you can use to quickly build good Firefox extensions. It’s what we recommend for new developers. It should be easy to work with, especially if you’re familiar with Google Chrome extensions or user scripts. It abstracts away most of the XUL / XPCOM infrastructure in Firefox, giving you a more familiar HTML and JS environment to work with.

The current approach to building an SDK extension is to download and set up the SDK, code locally,  then package your extension (an XPI file) using the cfx tool included with the SDK. The SDK team is working on making this process much easier by integrating it into Firefox developer tools. Soon you’ll be able to build your extensions very quickly, right from Firefox.

You can learn more about the SDK and get help here:

1. Documentation on MDN.

2. Articles in this blog.

3. Stack Overflow.

4. Add-ons forum.

5. #jetpack channel on Mozilla IRC.

6. Bootstrapped Extensions

Bootstrapped extensions don’t require a restart to be installed, like SDK extensions, but they don’t have the easy access to SDK APIs or sandboxing. You’re basically doing everything manually, like tracking windows to add or remove your UI. However, there are various great tools available to you via existing JavaScript Modules, like CustomizableUI.jsm for toolbar UI and Services.jsm for frequently used Firefox components.

Compared to the old way of making extensions (see Overlay extensions below), the only notable loss are overlays. Bootstrapped extensions have the bootstrap.js file instead, which is what serves as the starting point for your code. Otherwise, everything should be familiar to you: install.RDF, chrome.manifest and code files, all packed in a ZIP file with a .xpi extension.

Other than Bootstrapped extensions on MDN and the pages they link to, all the available developer resources are the same for overlay extensions (see below).

Firefox for Android extensions

Extensions in Firefox for Android are slightly different. Since the UI is native instead of XUL, the way extensions can modify it is different and a bit more limited. This also means overlay extensions are not supported, so your options are the SDK and bootstrapped extensions.

Since mobile applications have very limited screen real estate, browsers need to maximize the content area, meaning extensions can’t add buttons or toolbars to the browser. However, the Firefox for Android team recently developed the Firefox Hub API that lets extensions add their content to the home page. This is a smart place to put your extension UI if you need it.

You can learn more about Firefox for Android extensions and get help here:

1. Documentation on MDN.

2. Add-ons forum.

3. #extdev and #mobile channels on Mozilla IRC.

4. Overlay extensions

Overlay extensions are the old way of making add-ons. It might still make sense for you to use this approach if you need to create a very complex overlay or have other specific needs. However, having to restart Firefox to install this kind of extension is annoying because it breaks the user’s workflow, so you should definitely consider using the SDK or bootstrapped extensions first.

You can get help about extension development in general here:

1. Documentation on MDN.

2. Articles in this blog.

3. Add-ons forum.

4. #extdev channel on Mozilla IRC.