MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

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.

Starting from Firefox 53, no new legacy add-ons will be accepted on addons.mozilla.org (AMO) for desktop Firefox and Firefox for Android.

Starting from Firefox 57, only extensions developed using WebExtensions APIs will be supported on Desktop Firefox and Firefox for Android.

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 use WebExtensions APIs if they can. See the "Compatibility Milestones" document for more information.

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

Deprecated in Firefox 29 and removed in Firefox 38.

Warning: this tutorial relies on the since-removed Widget API and no longer works with Firefox.

The widget API is deprecated from Firefox 29 onwards. Please see the ui module for replacements. In particular, for a simple button, try the action button or toggle button APIs, and for a more complex widget try the toolbar or sidebar APIs.

In this tutorial we'll build an add-on that uses many of the SDK's high-level APIs.

The add-on is an annotator: it enables the user to select elements of web pages and enter notes (annotations) associated with them. The annotator stores the notes. Whenever the user loads a page containing annotated elements these elements are highlighted, and if the user moves the mouse over an annotated element its annotation is displayed.

Next we'll give a quick overview of the annotator's design, then go through the implementation, step by step.

If you want to refer to the complete add-on you can find it under the examples directory in the SDK.

Document Tags and Contributors

Tags: 
 Contributors to this page: wbamberg, Canuckistani, mar777
 Last updated by: wbamberg,