Wednesday, May 20th, 2009

You have the power to put the Jetpacks on Firefox; Extensions 2.0?

>

Being able to extend the Web to make it your Web is one of the features that makes the Open Web such a fantastic platform. We should all be working on how to lower the bar for users and developers so they can do this with the greatest of ease. Writing browser extensions has been far from easy which makes it more than impressive that we see so many add-ons out there, especially in the Firefox eco-system.

How fantastic would it be if you could also install the functionality without a browser restart? Instant on. That now comes to a Firefox near you thanks to new effort to make it easier for you to super charge your browser. Aza Raskin, Atul Varma, and the Mozilla Labs team have kicked off a new experiment called Jetpack that gives you that and the ability to make extensions as easy to write as a jQuery plugin :)

As this is Mozilla Labs, we are sharing this project very early stage. We want to get feedback and a community to define where this type of thing should go. As such, there will be things missing. That being said, what are the aspirational high level goals?

Web-based

  • HTML, Javascript, and CSS will be the only tools required to create a Jetpack Feature
  • Jetpack Features will be streamed & accessible via a URL, just like the rest of the Web.
  • Jetpack Features will require only the minimum amount of user interaction necessary for security to install: no restarts, and just a click or two and you are good to go.
  • Jetpack Features will be easily debugged in the browser without restarts using common Web development tools like Firebug

Secure

  • Jetpack Features will have access to only the privileges they need, and security should always be presented in human-terms, and not technical-terms.
  • Jetpack Features will be easy to code review — making security problems more shallow, and review times shorter.

Robust

  • Jetpack Features will use a versioned API so that you won’t have to update & revalidate your code for every new version of Firefox.
  • Jetpack Features will be universal. That means if you develop a Feature for Firefox, it should also run on Fennec, Thunderbird, Songbird, or any other potentially Jetpack-enabled platform.
  • Jetpack Features can be lightweight but also full featured applications that add to the Web experience, just like Firefox add-ons do today.

Extensible

  • Jetpack itself will be extensible allowing for the easy inclusion of reviewed & versioned third-party toolkits (e.g. jQuery, Dojo, etc.) and API libraries (e.g. Twitter, Delicious, Google Maps, etc.)

Fly with Jetpacks to Bespin

On the Bespin team we want to make the experience as easy as possible, so we created a jetpack plugin that is installed on the newly minted 0.2 version that we just pushed to bespin.mozilla.com. The new version has a lot of new functionality including integrated VCS support, which was a big push for us as we needed that to dogfood the tool properly!

But, back to Jetpack. With the latest Bespin you get Jetpack support for free. This was incredibly exciting to us as we saw how easy it is to create a new Jetpack feature and install it into the browser in real-time.

Here is a video showing just that. We walk through the creation of a new browser sidebar that looks like this:

javascript
< view plain text >
  1. // Setup the status bar component
  2. jetpack.statusBar.append({
  3.   html: <>
  4.     <img src="http://mail.google.com/mail/images/favicon.ico"/>
  5.       <span id="count"></span>
  6.   ,
  7.   onReady: function(doc) {
  8.     var gmail = new GmailNotifier(doc);
  9.   },
  10.   width: 20
  11. });
  12.  
  13.  
  14. // Gmail Notifier
  15. function GmailNotifier(doc){
  16.   $(doc).click(this.goToInbox);
  17.   this.update(doc);
  18.   setInterval(function() {
  19.     this.update(doc);
  20.   }, 60 * 1000);
  21. }
  22. GmailNotifier.prototype = {
  23.   goToInbox: function() {
  24.     jetpack.tabs.open("http://mail.google.com");
  25.     jetpack.tabs[ jetpack.tabs.length-1 ].focus();
  26.   },
  27.  
  28.   update: function(doc) {
  29.     var url = "http://mail.google.com/mail/feed/atom";
  30.     doc = $(doc);
  31.     $.get( url, function(xml){
  32.       var el = $(xml).find("fullcount"); // Unread message count
  33.  
  34.       if (el) {
  35.         var count = el.get(0).textContent;
  36.         doc.find("#count").text( count );
  37.       } else {
  38.         doc.find("#count").text( "Login" );
  39.       }
  40.     });
  41.   }
  42. }

In the video, when I created a new jetpack via jetpack create it placed this in a jetpacks project in Bespin. This can be version controlled and shared…. just like other Bespin projects.

I am really excited to see where Jetpack can go. Being able to lower the barrier for developers to use simple Web technology that they know (and maybe love?) to extend the browser seems to be a good plan to me. To learn more, check out these resources:

Related Content:

Posted by Dion Almaer at 3:14 pm
5 Comments

+++--
3.6 rating from 59 votes

5 Comments »

Comments feed TrackBack URI

The <> E4X XMLList literal in your example code is not closed. It needs to be closed with </>.

Comment by EliGrey — May 20, 2009

It looks like GreaseMonkey, but more user-friendly. Wonder if I can import my GreaseMonkey scripts to it?

Comment by Jordan1 — May 21, 2009

This is just freaking awesome. The whole browser now is the playground of anyone that can write javascript.

Can’t wait to hack Mootools into this and create my first simple plugin :D

Comment by SchizoDuckie — May 23, 2009

Will Bespin support an API for plugins like this?

Comment by zaach — May 23, 2009

On the var url = “http://mail.google.com/mail/feed/atom”; I wonder if I can use my godday account or lunarpages email as a feed/atom?
I don’t know how that would work. Is that possible?

Comment by Ish — November 11, 2009

Leave a comment

You must be logged in to post a comment.