Mozilla Add-ons SDK 0.7 Example

The release of the Mozilla Add-ons SDK 0.7 brings with it many useful APIs developers can leverage to create an even wider variety of Firefox add-ons without touching a single line of code from the underlying Mozilla platform. Notable APIs from 0.7 include Clipboard, Notifications, and the topic of this post, the Panel API.

The addition of Panel in the SDK provides for numerous UI and display implementations that were not nearly as easy to accomplish in earlier versions of the SDK. You can now easily display detailed, interactive content in response to a user interacting with your add-on’s widget, toolbar, or other browser UI.

Here is an example of what creating a simple Panel API instance looks like:

var panels = require("panel");
var data = require("self").data;

var myPanel = panels.add(panels.Panel({
    contentURL: data.url("somepage.html")

In the example extension MailPing, panels are used to show the user detailed information about their unread email messages. You can download MailPing from or grab a zippy of the entire package, add-on, source files and all.