OSCON: Supercharging Firefox with Extensions

Extensions are code that run in the browser just as if it was a part of Firefox. This talk is geared around "the trunk" (the upcoming Firefox 1.5). Popular examples:

• AdBlock
• Greasemonkey
• BugMeNot
• FoxyTunes
• Many toolbars: Google, Yahoo, A9, Netcraft

Structure of an Extension

• Install Manifest -- structure of extension, and where it should go in the Firefox system. Aids in deinstallation. No protection -- extensions can be written that don't cleanly uninstall.
• "Chrome" (User Interface components)
• Components (non-UI) - integrate with services, hook to other parts of system, etc.
• Defaults (Preferences)

Packaging

• "Zippy" files: zip file with a .xpi extension.
• Can package traditional "heavyweight" plugins (flash, pdf reader, etc.) as Zippy files
• Don't need GUID's anymore for directory name for extension.
• install.rdf file needs to be in root of .xpi.

UI Development with XUL

• Long topic; good resources for XUL development at developer.mozilla.org.
• Supplies UI controls, drag-n-drop, menus, toolbars, etc.
• Bound to actions through JavaScript
• You can do overlays, over Mozilla-supplied XUL, to plugin your own UI elements for the extension. XUL overlay can add, remove, or change elements in existing XUL.
• XUL is a document, which can be manipulated just like you would a DOM in DHTML.
• Site: xulplanet.com

Extension bits:

• Chrome Manifest -- where to put overlay and where to find it.
• Install Manifest
  • RDF/XML file
  • Identifies extension
  • Compatibility extension (allows to install in Thunderbird and Firefox, for example)
  • Take existing file and modify it -- to hard to do from scratch. Or grab an RDF generator.
  • Update information -- for update checking
  • Save as install.rdf

New testing bits:

• Can point firefox at a directory, so you don't need to repackage.
• Still need to restart browser to have it pick up new extension. But it seems like the browser will pick up code changes dynamically?
• If you turn off XUL cache, may not need to restart Firefox.

Creating New UI:

• Dialogs are in separate .xul files
• Functionality in .js files
• Use DOM methods to manipulate UI elements within XUL
• Use .css files to add images, set colors, change style, etc.

XPCOM Components

• Firefox supports XPCOM components in extensions
• This allows implementing code in JavaScript, C++ (Gecko SDK), etc. -- interacts with more of "the guts" of Firefox.
• Automatically registered by putting these files in components/ directory.