{"id":4815,"date":"2010-06-02T17:09:00","date_gmt":"2010-06-03T00:09:00","guid":{"rendered":"http:\/\/3.700"},"modified":"2010-06-02T17:09:00","modified_gmt":"2010-06-03T00:09:00","slug":"jetpack-0-4-extension-example-mailping","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/labs\/2010\/06\/jetpack-0-4-extension-example-mailping\/","title":{"rendered":"Jetpack 0.4 Extension Example – MailPing"},"content":{"rendered":"

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

You’ve got mail!<\/h2>\n

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! <\/p>\n


\n<\/p>\n

How it’s made<\/h2>\n

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:<\/p>\n

\nvar mpWidget = require('widget').Widget({\n    label:'MailPing',\n    content: '...HTML content goes here...',\n    onReady: function(){\n\t\/\/ onReady gives you access to your Widget when it's ready for manipulation\n\n        \/\/ My code was more extensive for this example so please view the source\n        \/\/ via the download link further down the page\n    },\n    onClick: function(){\n        \/\/ This is one of the events you can use to perform actions based on user input,\n        \/\/ see the documentation for the full list\n    }\n});\n\nrequire('widget').add(mpWidget);                      \n<\/pre>\n
I also used the Page Worker API to check the message counts, here is what an instantiation of a Page Worker instance looks like:<\/p>\n
\nvar gmail = require('page-worker').Page({\n    content: mpProviders.gmail.content,\n    onReady: function(){  \/\/ The onReady function is fired each time the content option is set\n        parse.run('gmail', gmail);\n        gmail.onReady = function(){}\n    }\n});\n\nrequire('page-worker').add(gmail);                 \n<\/pre>\n
Get the source files<\/h2>\n
Download this test extension package<\/a> and unpack it to the packages\/<\/i> subdirectory in your Jetpack SDK directory. Make sure the SDK is activated per the instructions<\/a> in the docs. Then enter the mailping\/<\/i> subdirectory and execute the command cfx -a firefox run<\/i> to try it out.<\/p>\n
Install the extension<\/h2>\n
To use the extension, you can install the MailPing test extension<\/a> from addons.mozilla.org.<\/p>\n
– Daniel Buchner, on behalf of the Jetpack team<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading<\/a><\/p>\n","protected":false},"author":229,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts\/4815"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/users\/229"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/comments?post=4815"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts\/4815\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/media?parent=4815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/categories?post=4815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/tags?post=4815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}