Tutorials

Add-ons using the techniques described in this document are considered a legacy technology in Firefox. 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.

From Firefox 53 onwards, no new legacy add-ons will be accepted on addons.mozilla.org (AMO).

From Firefox 57 onwards, WebExtensions will be the only supported extension type, and Firefox will not load other types.

Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to WebExtensions if they can. See the "Compatibility Milestones" document for more.

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,