Jetpack 0.6 is out, sporting a new menu API and Twitter library.
Jetpack is a platform for writing Firefox add-ons the same way you write for the Web: HTML, CSS, JavaScript, Webby libraries like jQuery, no browser restarts to see your changes. But that’s shortchanging it. It’s also add-ons with a security model; an interactive shell for tinkering with the browser, since it bundles Bespin; a playground for budding coders, potentially; portable to other XULRunner apps like Thunderbird; and a mechanism for extending not only the browser but the Web itself. If it’s easy now to dismiss Jetpack as add-ons lite, it’s only because it’s still teething.
The new menu API lets you manipulate the browser’s menus—not only menu bar and context menus, but menus you can create and attach most anywhere, chrome or content, popup or context.
These lines of JavaScript add a “Tweet This Link” item to the page’s hyperlink context menu:
jetpack.menu.context.page.on("a").add(function (context) ({
label: "Tweet This Link",
command: function () jetpack.lib.twitter.statuses.update({
status: context.node.href
})
}));
This one adds a “Recent Tweets” submenu to the Tools menu. When it’s opened, it displays a “Loading…” item, and if it remains open when the data comes down from Twitter, it’s filled in with solipsism, one item per tweet. Note that the word “Tools” doesn’t appear, nor does any position specifying where in the menu to insert the item. You tell Jetpack, “This is my add-on’s menu, stick it in the best place.” You can get specific if you want.
jetpack.menu.add({
label: "Recent Tweets",
menu: new jetpack.Menu({
beforeShow: function (menu) {
menu.set("Loading...");
jetpack.lib.twitter.statuses.public_timeline({
success: function (array) {
let tweetArray = array.map(function (obj) obj.text);
menu.set(tweetArray);
}
});
}
})
});
Try it out. (Mac users, a caveat.)
You can add popup menus to content in pages. This adds a popup to all images on the Web. Left-click any image in a page and you’ll get a menu that notifies you of its URL:
jetpack.tabs.onReady(function () {
$("img", this.contentDocument).each(function () {
var imgNode = this;
var myMenu = new jetpack.Menu([{
label: "Show Image URL",
command: function () jetpack.notifications.show(imgNode.src)
}]);
myMenu.popupOn(imgNode);
});
});
The first two snippets also illustrate Jetpack’s new Twitter API, which hews close to Twitter’s own. If you’re already familiar with that API, there’s nothing new to learn, and if you aren’t, it’s easy, and you can add the phrase “Twitter API” to your resume. (You’re welcome.)
If you have thoughts on these new APIs—or bugs or patches—let us know. More info and examples at the links below.