With the release of Jetpack SDK 0.4, developers have a variety of new APIs at their disposal. The following example will show you how to use the Page Worker and Widget APIs in your add-on code, but also have a look at the other notable APIs released in 0.4 – Simple Storage and Private Browsing.

You’ve got mail!

To show off the Jetpack SDK 0.4 release, I’ve constructed an add-on that checks Gmail and Yahoo Mail for unread inbox messages. It also lets you open tabs to both email services in a single click, and has some snazzy UI to boot!

How it’s made

First you want to create a new Widget instance – the Widget API allows you to easily add UI to Firefox in a way friendly to the user – here’s what the code looks like:

var mpWidget = require('widget').Widget({
    label:'MailPing',
    content: '...HTML content goes here...',
    onReady: function(){
	// onReady gives you access to your Widget when it's ready for manipulation

        // My code was more extensive for this example so please view the source
        // via the download link further down the page
    },
    onClick: function(){
        // This is one of the events you can use to perform actions based on user input,
        // see the documentation for the full list
    }
});

require('widget').add(mpWidget);

I also used the Page Worker API to check the message counts, here is what an instantiation of a Page Worker instance looks like:

var gmail = require('page-worker').Page({
    content: mpProviders.gmail.content,
    onReady: function(){  // The onReady function is fired each time the content option is set
        parse.run('gmail', gmail);
        gmail.onReady = function(){}
    }
});

require('page-worker').add(gmail);

Get the source files

Download this test extension package and unpack it to the packages/ subdirectory in your Jetpack SDK directory. Make sure the SDK is activated per the instructions in the docs. Then enter the mailping/ subdirectory and execute the command cfx -a firefox run to try it out.

Install the extension

To use the extension, you can install the MailPing test extension from addons.mozilla.org.

- Daniel Buchner, on behalf of the Jetpack team