How and Why to Extend Firefox in Javascript
(and Thunderbird, Komodo, and Songbird)
Graham King <graham@gkgk.org>
http://gkgk.org
Part 1: Firefox extensions: Why and How
Part 2: Building a Firefox extension
Part 3: Extending Mozilla Application Framework applications

Firefox extensions: Why and How
Graham King – Open Web Vancouver 2009
Part 1/3
Graham King 2
http://gkgk.org

Why build a Firefox extension?
(rather than a webapp or desktop app)
Because you'll target a platform with 270 million
users who have installed over 1 billion
extensions
Because there's a free 'app store'
(addons.mozilla.org) to publicise your extension
Because you already know the technologies you
need: Javascript and HTML
Graham King 3
http://gkgk.org

Types of FF extension
Browsing enhancements
Ambients apps
Desktop apps
Graham King 4
http://gkgk.org

Why build browsing extensions
Your app works above the level of a single site:
AdBlock: Websites would never provide this
Cooliris: Image browser
Foxden: Tiling window manager
To integrate your webapp into users lives:
del.icio.us: Would delicious have succeeded just as a
webapp?
TwitterBar / TwitterFox: Post to Twitter from the FF
address bar, view followed updates
Picnik: Right-click, edit in Picnik
Graham King 5
http://gkgk.org

Cooliris
A specialized network client for consuming images – aka an image browser
Graham King 6
http://gkgk.org

Why build ambient apps
Be where the user is. Not about browsing.
What does a user always have open?
Browser, email client, IDE, media player
Forecast Fox: Weather
Foxytunes: Control your media player
Status bar scientific calculator
Just needs an input box
Graham King 7
http://gkgk.org

Why build desktop apps
Native application: Drag and drop, file system
access, sockets, wrap a native library (.so, .dll)
FF is a cross-platform GUI toolkit for Javascript.
wxWidgets, GTK, QT, AIR, or Firefox?
Brief: feed reader
ChatZilla: IRC client
FireFTP: FTP client
Firebucket Amazon S3 manager
These are not about web browsing.
Graham King 8
http://gkgk.org

ChatZilla
Graham King 9
http://gkgk.org

What Firefox provides
Recent version of Javascript
Don't worry about IE / cross-browser
FF is way ahead of 'the web':
SVG, Canvas.
Sound, Video. Play OGG files natively.
Multi-threaded Javascript
... way ahead of the web, and gaining on Flash.
A lot of this is standard HTML 5, so we can
expect/hope other browsers catch up eventually
Graham King 10
http://gkgk.org

http://people.mozilla.com/~vladimir/demos/photos.svg
Graham King 11
http://gkgk.org

https://developer.mozilla.org/En/Manipulating_video_using_canvas
Green screen
Inserting background
FF 3.5
Only JS and Canvas
Talk: The Future of Web
Applications by Ben Galbraith
and Dion Almaer
Graham King 12
http://gkgk.org

Firefox extensions are not
Not plugins
Plugins register to display a file type:
PDF reader,
media players
about:plugins
Not search plugins:
Search bar pulldown.
OpenSearch standard.
Graham King 13
http://gkgk.org

There's no money in it
Very difficult to monetise an extension: No
standard way, and not part of the culture
Because of this, AFAIK, there's no freelance or
contract market
Consider releasing your extension as a
standalone product: This is what Flock did
Most 'written-for-money' extensions are a
channel to draw traffic: Facebook Toolbar,
Delicious, Picnik, weather ones, etc
Graham King 14
http://gkgk.org

What's in a Firefox extension
Code: Javascript
Layout: XUL, HTML
Media: Images, CSS
i18n: Resource bundles by (human) language
Preferences: Default settings
Packaged in a zip file with .XPI extension
Graham King 15
http://gkgk.org

Extension points
Need to integrate with the browser somehow:
top menu
context menu
status bar, etc
Write a XUL overlay
A regular XUL file
Graham King 16
http://gkgk.org

Key files
install.rdf
Install manifest: Name, version, etc
chrome.manifest
Attaches your overlay(s)
content/overlay.xul
Hook into Firefox
content/main.js
Your code
Graham King 17
http://gkgk.org

Let's do it!
Graham King 18
http://gkgk.org

Building a Firefox extension
Graham King – Open Web Vancouver 2009
Part 2/3

Setup dev environment
Create a development
profile
firefox ­P ­no­remote
Install Extension Developers Extension
https://addons.mozilla.org/en­US/firefox/addon/7434/
Graham King 20
http://gkgk.org

Turn on debugging prefs
Tools / Extension Developer / Enable Debugging
Preferences
It changes these preferences:
javascript.options.showInConsole = true
Logs errors in chrome files to the Error Console.
nglayout.debug.disable_xul_cache = true
Disables the XUL cache so that changes to windows and dialogs do not require a
restart. This assumes you're using directories rather than JARs. Changes to XUL overlays
will still require reloading of the document overlaid.
browser.dom.window.dump.enabled = true
Enables the use of the dump() statement to print to the standard console.
javascript.options.strict = true
Enables strict JavaScript warnings in the Error Console.
extensions.logging.enabled = true
This will send more detailed information about installation and update problems to the
Error Console.
Graham King 21
http://gkgk.org

install.rdf
<?xml version=\"1.0\"?>
<RDF:RDF xmlns:em=\"http://www.mozilla.org/2004/em­rdf#\"
xmlns:NC=\"http://home.netscape.com/NC­rdf#\"
xmlns:RDF=\"http://www.w3.org/1999/02/22­rdf­syntax­ns#\">
<RDF:Description RDF:about=\"urn:mozilla:install­manifest\"
em:id=\"simple@darkcoding.net\"
em:name=\"Simple One\"
em:version=\"0.1\"
em:creator=\"Graham King\"
em:description=\"Some text here\">
<em:targetApplication>
<Description>
<em:id>{ec8030f7­c20a­464f­9b0e­13a3a9e97384}</em:id>
<em:minVersion>3.0.0</em:minVersion>
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</RDF:Description>
</RDF:RDF>
Graham King 22
http://gkgk.org

install.rdf
Gets displayed in Tools / Add-ons
The scariest part of FF extensions
Extension Builder will generate it for you
List of valid application versions and GUIDs:
https://addons.mozilla.org/en-US/firefox/pages/
appversions
Not that minVersion cannot have a wildcard - use
3.0.0. maxVersion 3.0.* or 3.5.
Graham King 23
http://gkgk.org

Berners Lee and his robot slaves
HTTP got him a knighthood
Next invention could get him into the House of
Lords
Yes, that's like Obama appointing the inventor of
RSS to the Senate. Go Monarchy!
Firefox uses RDF in a few places
You may never encounter them. If you do you'll
find RDF simpler than you thought.
Graham King 24
http://gkgk.org

chrome.manifest
content simple content/
overlay chrome://browser/content/browser.xul
chrome://simple/content/menu_overlay.xul
(overlay... is all on one line)
Graham King 25
http://gkgk.org

chrome.manifest
chrome is everything in the browser that isn't the
web page:
Menus, toolbars, icons, scrollbars, right-click menu,
etc
chrome:// Most of the browser is directly
accessible
Browse the chrome with Chrome List extension
https://addons.mozilla.org/en-
US/firefox/addon/4453
Graham King 26
http://gkgk.org

The chrome: scheme
Graham King 27
http://gkgk.org

content/menu_overlay.xul
<?xml version=\"1.0\"?>
<overlay id=\"simple_menuitem\"
xmlns=\"http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul\">
<menupopup id=\"menu_ToolsPopup\">
<menuitem label=\"Speak to me\"
insertbefore=\"sanitizeSeparator\" />
</menupopup>
</overlay>
Graham King 28
http://gkgk.org

DOM Inspector: Finding an overlay
point
Graham King 29
http://gkgk.org

XUL
XML User-interface layout Language
All the widgets of HTML, plus a few
More programmer friendly than HTML / CSS
Layout, not semantic markup
Feels similar to Adobe's MXML (Flex)
You can use HTML / CSS instead
Graham King 30
http://gkgk.org

XUL
<?xml version=\"1.0\"?>
<window title=\"Example\"
xmlns=\"http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul\">
<vbox>
<hbox>Name: <textbox /></hbox>
<hbox>
<button id=\"yes\" label=\"Yes\"/>
<button id=\"no\" label=\"No\"/>
</hbox>
<progressmeter mode=\"determined\"
value=\"70\"/>
</vbox>
</window>
Graham King 31
http://gkgk.org

Not 1984
'There is no Dana, only
Zuul'
Most of the widgets
XUL provides are
available as HTML/JS
And you already know
HTML.
Graham King 32
http://gkgk.org

Test our extension
Find your profile directory
~/.mozilla/firefox/<stuff>.dev/extensions
http://kb.mozillazine.org/Profile_folder_-_Firefox
Create a file called your id from install.rdf
touch simple@darkcoding.net
Edit it to contain one line, the path to the directory
containing the install.rdf
/home/graham/Projects/simpleff
Graham King 33
http://gkgk.org

Make our extension say hello
<?xml version=\"1.0\"?>
<overlay id=\"simple_menuitem\"
xmlns=\"http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul\">
<menupopup id=\"menu_ToolsPopup\">
<menuitem label=\"Speak to me\"
insertbefore=\"sanitizeSeparator\"
oncommand=\"alert('Hello Vancouver!');\" />
</menupopup>
</overlay>
Tools/Extension Developer / Reload all chrome
Graham King 34
http://gkgk.org

content/main.xhtml
An HTML only window. No XUL required.
<!DOCTYPE html PUBLIC \"­//W3C//DTD XHTML 1.1//EN\"
\"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>.bashrc editor</title>
<script src=\"http://ajax.googleapis.com/
ajax/libs/jquery/1.3.2/jquery.min.js\" />
<script src=\"main.js\" />
</head>
<body>
<form action=\"\" method=\"get\">
<textarea id=\"texteditor\" name=\"texteditor\"
cols=\"60\" rows=\"30\">Loading...</textarea>
<input id=\"submit\" type=\"submit\" value=\"Save\" />
</form>
</body>
</html>
Browse: chrome://simple/content/main.xhtml
Graham King 35
http://gkgk.org

content/main.js
var SP = {
openWindow: function() {
openDialog('chrome://simple/content/main.xhtml');
},
init: function() {
$('#texteditor').text('This is a test');
}
}
$( SP.init );
jQuery on the desktop!
Now we just need to call SP.openWindow
Graham King 36
http://gkgk.org

Open the window
<?xml version=\"1.0\"?>
<overlay id=\"simple_menuitem\"
xmlns=\"http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul\">
<script src=\"main.js\" />
<menupopup id=\"menu_ToolsPopup\">
<menuitem label=\"Edit .bashrc\"
insertbefore=\"sanitizeSeparator\"
oncommand=\"SP.openWindow();\" />
</menupopup>
</overlay>
Graham King 37
http://gkgk.org

Chrome / Native permissions
It's just HTML and Javascript, but we have
chrome privileges.
This means we are allowed to do anything
Firefox is allowed to do.
We do these exciting things using XPCOM.
Graham King 38
http://gkgk.org

XPCOM – The cool stuff
XPCOM: Cross Platform Component Object Model
Similar to CORBA and Microsoft COM
How Javascript accesses the interesting stuff
Contract id:
@<internetdomain>/module[/submodule[...]];<version>
Cast to the desired interface
Two types: Singletons (getService) and regular objects
(createInstance)
Components.classes[\"@mozilla.org/file/local;1\"].
createInstance(Components.interfaces.nsILocalFile);
Graham King 39
http://gkgk.org

XPCOM service example
function getHomeDir() {
var dirService =
Components.classes[\"@mozilla.org/file/directory_servi
ce;1\"].getService(Components.interfaces.nsIProperties
);
var homeDirFile =
dirService.get(\"Home\",Components.interfaces.nsIFile);
dump(homeDirFile.path +'\\n');
return homeDirFile.path;
}
Graham King 40
http://gkgk.org

What services are available?
Google, developer.mozilla.org
Enumerate in JS
for (var name in Components.classes) { dump(name +'\\n'); }
for (var name in Components.interfaces) { dump(name +'\\n'); }
Use XPCOM Viewer extension
Graham King 41
http://gkgk.org

Write your own XPCOMponent
In JS or C++
Wrap a native library in XPCOM
Graham King 42
http://gkgk.org

Package your extension
.xpi is zip
zip up your project dir
or use Extension Developer
Graham King 43
http://gkgk.org

Release your extension
mozdev.org will host it for you. Web pages, CVS
and Mercurial
Upload to addons.mozilla.org
Huge audience
Feedback: ratings, reviews, active community
Automatically distributes updates
Every release is manually reviewed
Ensures quality
Very sloooowww
Graham King 44
http://gkgk.org

Resources
developer.mozilla.org
Prefix search with 'mdc'
NOT xulplanet.org
Other people's extensions. Unzip the jar
Source code: The Mozilla cross (X) Reference:
http://mxr.mozilla.org/
#xul on irc.mozilla.org
Graham King 45
http://gkgk.org

Jetpack: Extensions 2.0
Mozilla Labs project, very new
HTML overlays: No more XUL
Sensible Javascript API: No more XPCOM
No more browser restarts
Mozilla realise that XUL and XPCOM are barriers
to entry
Graham King 46
http://gkgk.org

Extending Mozilla Application Framework
applications
Graham King – Open Web Vancouver 2009
Part 3/3

The what?
Mozilla Application Framework
The framework previously know as:
XPToolkit
XPFE
What Firefox, Thunderbird, Komodo, Songbird, etc
etc are built on.
Use it instead of GTK, QT, or AIR.
Graham King 48
http://gkgk.org

Comparing to Firefox
What's the same
The tools: XUL, HTML, CSS, Javascript
The package: .xpi with install.rdf, chrome.manifest
and overlay
The XPCOM way of getting services / objects
What's different:
The XPCOM services provided
The chrome and overlay points
No URL bar to browse chrome
Less documentation, smaller communities
Graham King 49
http://gkgk.org

Thunderbird
Previously Netscape Messenger
New company: Mozilla Messaging
David Ascher's talk
Reaching out to extension developers
Docs and extension support very patchy
Graham King 50
http://gkgk.org

Thunderbird: Dev env
Create dev profile:
thunderbird ­P ­no­remote
Install
Extension Developer
Turn on Debugging Preferences
Dom Inspector
ThunderBrowse
To browse chrome URLs
Graham King 51
http://gkgk.org

Thunderbird: install.rdf
<?xml version=\"1.0\" encoding=\"UTF­8\"?>
<RDF xmlns=\"http://www.w3.org/1999/02/22­rdf­syntax­ns#\"
xmlns:em=\"http://www.mozilla.org/2004/em­rdf#\">
<Description about=\"urn:mozilla:install­manifest\">
<em:id>simple@tbird.darkcoding.net</em:id>
<em:name>Simple Hello</em:name>
<em:version>0.1</em:version>
<em:creator>Graham King</em:creator>
<em:description>Description goes here</em:description>
<em:targetApplication>
<Description>
<!­­ thunderbird ­­>
<em:id>{3550f703­e582­4d05­9a08­453d09bdfdc6}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
Graham King 52
http://gkgk.org

Thunderbird: chrome.manifest
content simple content/
overlay chrome://messenger/content/messenger.xul
chrome://simple/content/menu_overlay.xul
(overlay... is all on one line)
What you overlay changes
Use DOM Inspector to find overlay point
Graham King 53
http://gkgk.org

Thunderbird: menu_overlay.xul
<?xml version=\"1.0\"?>
<overlay id=\"simple_menuitem\"
xmlns=\"http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul\">
<menupopup id=\"menu_HelpPopup\">
<menuitem label=\"Say Hello\"
insertbefore=\"menu_HelpAboutSeparator\"
oncommand=\"alert('Hello!');\" />
</menupopup>
</overlay>
Graham King 54
http://gkgk.org

Thunderbird: Test it
Find your profile directory
~/.mozilla-thunderbird/xxxxx-dev/extensions
Create file same as your id
simple@tbird.darkcoding.net
Single line, path to dir with your install.rdf
/home/graham/Projects/tbird/simple
Graham King 55
http://gkgk.org

Thunderbird: Help Me
The docs are sparse, so look at other's
extensions, or the source code.
https://developer.mozilla.org/En/Extensions/Thun
derbird
Mozilla Messaging are actively improving
extension developer story
Mozilla Messaging are based right here in
Vancouver
Graham King 56
http://gkgk.org

Komodo
IDE from ActiveState. Open source.
Very good choice for editing XUL, JS, etc.
Mostly written in Python
Uses PyXPCOM, which ActiveState started
Extensions are still in JS (but..)
Graham King 57
http://gkgk.org

Komodo: Setup dev environment
Find your profile directory
http://docs.activestate.com/komodo/5.0/trouble.html#
appdata_dir
Create a directory to hold your dev profile
Set KOMODO_USERDATADIR and run:
KOMODO_USERDATADIR=/home/graham/.komodoedit/dev
/usr/local/Komodo­Edit­5/bin/komodo
(all on one line)
Graham King 58
http://gkgk.org

Komodo: Setup dev environment
Extension developer's extension:
http://community.activestate.com/node/1824
DOM Inspector: https://addons.mozilla.org/en-
US/firefox/addon/6622
Install them by File / Open... in Komodo.
Then add a Macro to start DOM Inspector:
Toolbox / Add / New Macro
window.openDialog(\"chrome://inspector/content/\",
\"_blank\",
\"chrome,all,dialog=no\");
Graham King 59
http://gkgk.org

Komodo: install.rdf
<?xml version=\"1.0\"?>
<RDF xmlns=\"http://www.w3.org/1999/02/22­rdf­syntax­ns#\"
xmlns:em=\"http://www.mozilla.org/2004/em­rdf#\">
<Description about=\"urn:mozilla:install­manifest\">
<em:id>helloko@darkcoding.net</em:id>
<em:name>hello Ko</em:name>
<em:version>0.1</em:version>
<em:description></em:description>
<em:creator>Me</em:creator>
<em:homepageURL>http://darkcoding.net/helloko</em:homepageURL>
<em:type>2</em:type> <!­­ type=extension ­­>
<em:targetApplication>
<Description>
<!­­ Komodo Edit's uuid ­­>
<em:id>{b1042fb5­9e9c­11db­b107­000d935d3368}</em:id>
<em:minVersion>4.1</em:minVersion>
<em:maxVersion>5.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
Graham King 60
http://gkgk.org

Komodo: chrome.manifest
content helloko content/
overlay chrome://komodo/content/komodo.xul
chrome://helloko/content/overlay.xul
(overlay.. goes all on one line)
Can also use Komodo's built in template:
File / New / Project From Template... / Komodo /
Komodo Extension
Graham King 61
http://gkgk.org

Komodo: overlay.xul
<?xml version=\"1.0\"?>
<overlay id=\"helloOverlay\"
xmlns=\"http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul\">
<menupopup id=\"popup_tools\">
<menuitem label=\"Say hello\"
insertbefore=\"menu_addons_separator\"
oncommand=\"alert('Hello Komodo Vancouver!');\"/>
</menupopup>
</overlay>
In extensions dir:
~/.komodoedit/dev/5.1/host-rufus/XRE/extensions
Add the usual single line file
Graham King 62
http://gkgk.org

Komodo: Python
Some Python io modules wrapped as JS
os, os.path, glob, shutil, maybe more
var os = Components.classes['@activestate.com/koOs;1'].
getService(Components.interfaces.koIOs)
Some partially wrapped
urllib, time, maybe more
Komodo will auto-complete all these for you
Can write XPCOMponents in Python (on top of
the usual JS and C++)
Graham King 63
http://gkgk.org

Komodo: More
Can also add support for new (computer)
languages
Jeff Griffiths, Komodo hacker, is one of the
organisers of Open Web Vancouver.
ActiveState are based in Vancouver.
http://wiki.openkomodo.com/index.php/Extension
_Development
Graham King 64
http://gkgk.org

Songbird – media player
Graham King 65
http://gkgk.org

Songbird – Setup dev environment
Bring back system window:
http://addons.songbirdnest.com/addon/1462
Create dev profile (on my Ubuntu install from
getdeb.net, the /usr/bin script didn't pass on
parameters)
/usr/share/Songbird/songbird -p
Install the developer extension
http://addons.songbirdnest.com/addon/68
Graham King 66
http://gkgk.org

Songbird developer extension
Has everything:
Refresh UI
XPCOM Viewer
DOM Inspector
And more:
XUL periodic table
Extension wizard
Graham King 67
http://gkgk.org

Songbird extension
Just like the others:
install.rdf, chrome.manifest, xul overlay, javascript
A great walkthrough:
http://wiki.songbirdnest.com/Developer/Articles/Gettin
g_Started/Developing_Extensions
Graham King 68
http://gkgk.org

Songbird loves you
http://wiki.songbirdnest.com/Developer/Developer_Intro/Extensions
The best extension
developer story by far
One place to find docs
Extension developer's
extension
API docs
Graham King 69
http://gkgk.org

Your app on xulrunner
An extension can be re-worked to run on its own,
using xulrunner.
Extend your webapp out to the desktop:
Firefox extension or XULRunner app
An open alternative to Adobe AIR
Flickr Uploadr is built on the Mozilla Application
Framework.
Graham King 70
http://gkgk.org

Conclusion
Mozilla Application Platform is:
Easy once you get past the install.rdf magic
The key to desktop apps in Javascript
To build an extension:
Setup your dev environment
install.rdf
chrome.manifest
XUL overlay, JS, etc
Start with Firefox or Songbird.
Graham King 71
http://gkgk.org