FUEL & Chrome JavaScript Libraries

Mark Finkle

Mozilla Corporation

Content JavaScript Libraries

Chrome JavaScript Libraries

FUEL

FUEL (Firefox User Extension Library) is a JavaScript Library designed to help developers build extensions using terminology and interfaces that are familiar to them.

Making XPCOM Easier

FUEL Examples - Preferences

  // global prefs
  Application.prefs.get("my.pref", default);
  Application.prefs.set("my.pref","foo");
  
  // extension-level prefs uses the extension id as a branch
  extension.prefs.set("autosave", true);
        

FUEL Examples - Storage

  // global prefs
  Application.storage.get("name", default);
  Application.storage.set("name","foo");
  
  // extension-level prefs uses the extension id as a branch
  extension.storage.set("autosave", true);
        

FUEL Examples - Events

  Application.events.addListener("ready", function() { /* display message */ } );  
  Application.events.addListener("quit", function() { /* save data */ } );  

  Application.storage.events.addListener("change", function() { } );
  Application.prefs.events.addListener("change", function() { } );
  
  extension.events.addListener("uninstall", function() { /* cleanup prefs */ } );
        

FUEL Examples - Bookmarks

  Application.bookmarks.all.forEach( function(b) {
    // look at each bookmark
  });
  
  Application.bookmarks.events("add", function() { /* new bookmark added */ } );
  Application.bookmarks.events("remove", function() { /* bookmark removed */ } );
  Application.bookmarks.events("change", function() { /* bookmark changed */ } );
  
        

FUEL Examples - Browser

  Application.browsers.forEach( fucntion(b) {
    // look at each open browser window (not tab)
  });

  Application.activeBrowser.tabs.forEach( function(t) {
    // look at each open tab in the active browser window
  });

  // opens a new tab in the browser window
  var tab = browser.open("http://mozilla.org");
  
  // make sure the new tab is visible in the browser window
  tab.focus();
        

Effects

Modern UI designs utilize animations and visual ques

Resources