Annotator

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.

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,