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

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