Jetpack 0.4 Extension Example – MailPing

Myk Melez

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({
    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


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({
    onReady: function(){  // The onReady function is fired each time the content option is set'gmail', gmail);
        gmail.onReady = function(){}


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

– Daniel Buchner, on behalf of the Jetpack team