It was fascinating to watch the unveiling of Firefox 3 last week. I’m pleased that, in some small way, my contributions helped to bring this browser out the door.
First 24 hours: 8.3 million downloads, 69 downloads/second, 20 Gb/s Peak Transfer
While I generally focus on issues tangential to JavaScript code, at Mozilla – like testing, performance analysis, specifications, standards, bug hunting, speaking, demos, and blogging – some of my code is live within the browser, and that makes me quite happy.
One of my first tasks at Mozilla was to, with Mark Finkle, develop a JavaScript API for performing common interactions typically desired by extension developers, called: FUEL. This is a pure-JavaScript implementation that sits as a proxy inbetween the developer and the various, traditional, XPCOM-style ways of performing actions.
If you’re interested in learning more about FUEL I’ve collected a number of links and examples:
The Development of FUEL
FUEL was created over the course of a couple months, in early 2007, by Mark Finkle and I. Mark had much-better knowledge of Mozilla’s APIs and I had good knowledge of JavaScript and API design – the match worked out nicely. I’ve written a couple blog posts on FUEL and so has Mark.
You can also see the features and code that went into FUEL 0.1 and FUEL 0.2 in Bugzilla.
FUEL, Today
Today FUEL lives in Firefox 3 (meaning that you can use it to develop Firefox extensions) and is part of the core Mozilla platform (meaning that portions of the API will be available in any Mozilla-based application that is built). For example you can even use a FUEL-like API in Thunderbird (called ‘STEEL‘). Here are some of the best resources for getting started with FUEL in Firefox 3:
- FUEL – Main Page (API, Examples)
- FUEL – Documentation (API)
- FUEL – Presentation (John Resig) – Given in Paris at a Mozilla DevDay, June 2007 – see below.
- FUEL – Presentation (Mark Finkle) – Given in Tokyo at a Mozilla DevDay, June 2007.
- STEEL – Example – If you’re interested in extending Thunderbird Bryan Clark provides a good example.
Here are some of my favorite example of FUEL in action. It was very important to me that the most-common actions take no more than a single line of code to perform – with even complex actions keeping nice and trim.
Open, and activate, a new tab pointing to Google.com
Application.browser.open("http://google.com/").active = true;
Close the active browser tab
Application.browser.activeTab.close();
Close all tabs that mention Google
Application.browser.tabs.forEach(function(tab){
if ( tab.url.match(/google/) )
tab.remove();
});
Add a new bookmark pointing to Mozilla
Application.bookmarks.add("Mozilla", "http://mozilla.org/");
Remove all bookmarks pointing to Google.com
Application.bookmarks.all.forEach(function(cur){
if ( cur.url.match(/google.com/) )
cur.remove();
});
FUEL, Future
Development is still going strong on FUEL. There’s a Google Summer of Code student working on extending the API and porting it to more parts of the platform (along with backwards support for Firefox 2!). We’ll probably end up seeing this in Firefox 3.1 (the next version of Firefox, due out later this year).
If you have any questions concerning how to use FUEL, or to develop Firefox extensions in general, your best bet would probably be to join the #extdev IRC channel on irc.mozilla.org. Lots of knowledgeable people hang out there and will be more-than-capable of answering any questions that you might have.
Once again, I’m terribly excited by the final release of Firefox 3 – here’s hoping to many more excellent releases to come!
Joe (June 23, 2008 at 10:03 pm)
BA…that’s short for bad ass. jQuery makes Javascript “easier” and now making FF extensions, just got easier as well. Thanks John…
http://www.subprint.com
Ryan Graf (June 23, 2008 at 10:47 pm)
Thank you for your contributions in making Firefox a fantastic browser.
FUEL certainly lowers the programming pre-requisites on developing great extensions. I’m excited to see more creative ways to extend the platform from other great minds.
Blair McBride (June 23, 2008 at 10:59 pm)
Anything that reduces the workload dealing with the massive Mozilla/Firefox APIs (in particular, the XPCOM stuff) is a Good Thing.
I’ve been following the development of FUEL/STEEL since I first heard of it back in 2007, and can’t wait for it to cover a lot more of the platform.
Wanli (June 24, 2008 at 12:49 am)
Is there a special version for xulrunner1.9 only (JQuery and FUEL, both) ?
John Resig (June 24, 2008 at 4:27 am)
@Wanli: I’d imagine that the core portions of FUEL would be compatible with XULRunner 1.9 (stuff like events and preferences) – but directly, I’m unsure.
As far as jQuery goes – I know that there’s a number of developers who use jQuery in Firefox extensions. If bugs are submitted that are Firefox/Greasemonkey specific we generally try to tackle them.
Chris (June 24, 2008 at 7:41 am)
Any chance of making FUEL Awesome?
i.e. exposing awesome bar queries to javascript. I’m thinking something like Places(‘FUEL’) returning an array of history objects – the same websites you’d get if you entered ‘FUEL’ into the awesome bar.
this would mean exposing history to extensions, not sure about the security implications of this …
John Resig (June 24, 2008 at 8:17 am)
@Chris: Actually, that’s one of the things that’s being worked on this summer by the Google Summer of Code student (tapping in to the browser history). Extensions already have the ability to access the history so security isn’t really an issue here – just ease of use.
Chris (June 24, 2008 at 8:38 am)
fantastic news, thanks John! It wasn’t obvious from the open bugs, it seems like they focus more on tab history rather than general browser history with queries.
This additional functionality could power many an extension … well done again for all your efforts.
Jorge (June 24, 2008 at 11:13 am)
John, we’re working on an extension for Firefox 3, and we were trying to get the most out of FUEL, but we ran into a little problem: most of our code is written in Javascript Code Modules, and it seems that FUEL can only be used inside the chrome.
Am I wrong on this one, maybe I just need to do an import of the FUEL JS as it were a jsm?
mikeal (June 24, 2008 at 1:05 pm)
I’ve been using FUEL for the last month and it’s great.
One thing though, the documentation ranges from sparse to non-existent.
Particularly the event stuff. Nowhere have I been able to find a list of events that you can listen to, and the names of events seem to be different from their XPCOM counterparts (which is probably a good thing).
All the examples in your slides and in Mark Finkles’ slides don’t exist in the actual documentation for the project, I didn’t see some of that tabs stuff until today and I’ve had the wiki docs constantly open for weeks working through all this.
I’ve figured out more about writing extensions with FUEL by trolling through this blog and Mark Finkle’s blog than looking through any actual documentation for the project.
What we really need is a step by step guide to writing extensions with FUEL that can be extended and maintained over time instead of a bunch of random wiki page API docs. This stuff makes writing extensions so easy but the with the state of the docs you would already need to have some experience writing extensions before you could figure out how to use this.
Thanks for getting this going! I would have been pulling my hair out all week if I was having to write this extension the old way.
Suplementy CaliVita (June 27, 2008 at 1:49 pm)
John Thank you very much for your contribution to firefox 3.
Fuel is a good basis for this new browser
jsfun (July 19, 2008 at 7:21 pm)
how can I get to this automagical interface `Application` from extensions like chickenfoot or greasemonkey, thanks