Tutorials

We are planning to deprecate the use by Firefox add-ons of the techniques described in this document.

Don't use these techniques to develop new add-ons. Use WebExtensions instead.

If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions instead.

Add-ons developed using these techniques might not work with multiprocess Firefox (e10s), which is already the default in Firefox Nightly and Firefox Developer Edition, and will soon be the default in Beta and Release versions of Firefox. We have documentation on making your add-ons multiprocess-compatible, but it will be more future-proof for you to migrate to WebExtensions.

A wiki page containing resources, migration paths, office hours, and more, is available to help developers transition to the new technologies.

This page lists practical hands-on articles about how to accomplish specific tasks using the SDK.


Getting started

Installation
How to install the jpm tool, which you will use for developing add-ons.
Troubleshooting
Some pointers for fixing common problems and getting more help.
Getting started
Walkthrough of creating a simple add-on with the SDK, using jpm.

Create user interfaces

Add a toolbar button
Attach a button to the Firefox Add-on toolbar.
Add a menu item to Firefox
Add items to Firefox's main menus.
Display a popup
Display a popup dialog implemented with HTML and JavaScript.
Add a context menu item
Add items to Firefox's context menu.

Interact with the browser

Open a web page
Open a web page in a new browser tab or window using the tabs module, and access its content.
Listen for page load
Use the tabs module to get notified when new web pages are loaded, and access their content.
Get the list of open tabs
Use the tabs module to iterate through the currently open tabs, and access their content.

Modify web pages

Modify web pages based on URL
Create filters for web pages based on their URL: whenever a web page whose URL matches the filter is loaded, execute a specified script in it.
Modify the active web page
Dynamically load a script into the currently active web page.

Development techniques

Logging
Log messages to the console for diagnostic purposes.
Creating reusable modules
Structure your add-on in separate modules to make it easier to develop, debug, and maintain. Create reusable packages containing your modules, so other add-on developers can use them too.
Unit testing
Writing and running unit tests using the SDK's test framework.
Chrome authority
Get access to the Components object, enabling your add-on to load and use any XPCOM object.
Creating event targets
Enable the objects you define to emit their own events.
Listen for load and unload
Get notifications when your add-on is loaded or unloaded by Firefox, and pass arguments into your add-on from the command line.
Using third-party modules (jpm)
Install and use additional modules which don't ship with the SDK itself.
Localization
Writing localizable code.
Mobile development
Develop add-ons for Firefox Mobile on Android.
Add-on Debugger
Debug your add-on's JavaScript.

Putting it together

Annotator add-on
A walkthrough of a relatively complex add-on.

 


Join the Add-on SDK community

Choose your preferred method for joining the discussion:

Document Tags and Contributors

Tags: 
 Contributors to this page: wbamberg, evold, kosmodrey, aviav
 Last updated by: wbamberg,