Presented at Open Web Vancouver, Friday 12th June 2009

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

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

4. Because you'll target a platform with 270 million users who have installed over 1 billion extensions

5. Because there's a free 'app store' (addons.mozilla.org) to publicise your extension

6. Because you already know the technologies you need: Javascript and HTML

8. Ambients apps

9. Desktop apps

11. Cooliris: Image browser

13. TwitterBar / TwitterFox: Post to Twitter from the FF address bar, view followed updates

14. Picnik: Right-click, edit in Picnik

15. Cooliris A specialized network client for consuming images – aka an image browser

18. Foxytunes: Control your media player

21. FF is a cross-platform GUI toolkit for Javascript.

23. ChatZilla: IRC client

24. FireFTP: FTP client

25. Firebucket Amazon S3 manager

26. These are not about web browsing.

27. ChatZilla

29. Don't worry about IE / cross-browser

31. Sound, Video. Play OGG files natively.

32. Multi-threaded Javascript

34. http://people.mozilla.com/~vladimir/demos/photos.svg

36. Inserting background

37. FF 3.5

38. Only JS and Canvas

39. Talk: The Future of Web Applications by Ben Galbraith and Dion Almaer

41. media players

43. OpenSearch standard.

45. Because of this, AFAIK, there's no freelance or contract market

46. Consider releasing your extension as a standalone product: This is what Flock did

47. Most 'written-for-money' extensions are a channel to draw traffic: Facebook Toolbar, Delicious, Picnik, weather ones, etc

49. Layout : XUL, HTML

50. Media : Images, CSS

51. i18n : Resource bundles by (human) language

52. Preferences : Default settings

53. Packaged in a zip file with .XPI extension

55. context menu

58. Let's do it!

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

62. install.rdf <?xml version=&quot;1.0&quot;?> <RDF:RDF xmlns:em=&quot;http://www.mozilla.org/2004/em-rdf#&quot; xmlns:NC=&quot;http://home.netscape.com/NC-rdf#&quot; xmlns:RDF=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;> <RDF:Description RDF:about=&quot;urn:mozilla:install-manifest&quot; em:id=&quot;simple@darkcoding.net&quot; em:name=&quot;Simple One&quot; em:version=&quot;0.1&quot; em:creator=&quot;Graham King&quot; em:description=&quot;Some text here&quot;> <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>

64. The scariest part of FF extensions

65. Extension Builder will generate it for you

66. List of valid application versions and GUIDs: https://addons.mozilla.org/en-US/firefox/pages/appversions

67. Not that minVersion cannot have a wildcard - use 3.0.0. maxVersion 3.0.* or 3.5.

69. Next invention could get him into the House of Lords

70. Yes, that's like Obama appointing the inventor of RSS to the Senate. Go Monarchy!

71. Firefox uses RDF in a few places

72. You may never encounter them. If you do you'll find RDF simpler than you thought.

73. chrome.manifest content simple content/ overlay chrome://browser/content/browser.xul chrome://simple/content/menu_overlay.xul (overlay... is all on one line)

75. Browse the chrome with Chrome List extension

76. https://addons.mozilla.org/en-US/firefox/addon/4453

77. The chrome: scheme

78. content/menu_overlay.xul <?xml version=&quot;1.0&quot;?> <overlay id=&quot;simple_menuitem&quot; xmlns=&quot; http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xul&quot;> <menupopup id=&quot;menu_ToolsPopup&quot;> <menuitem label=&quot;Speak to me&quot; insertbefore=&quot;sanitizeSeparator&quot; /> </menupopup> </overlay>

79. DOM Inspector: Finding an overlay point

81. All the widgets of HTML, plus a few

83. You can use HTML / CSS instead

86. Most of the widgets XUL provides are available as HTML/JS

87. And you already know HTML.

93. Now we just need to call SP.openWindow

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

96. This means we are allowed to do anything Firefox is allowed to do.

97. We do these exciting things using XPCOM.

99. Similar to CORBA and Microsoft COM

100. How Javascript accesses the interesting stuff

101. Contract id: @<internetdomain>/module[/submodule[...]];<version>

102. Cast to the desired interface

106. Enumerate in JS

107. Use XPCOM Viewer extension for (var name in Components.classes) { dump(name +''); } for (var name in Components.interfaces) { dump(name +''); }

109. Wrap a native library in XPCOM

111. zip up your project dir

112. or use Extension Developer

115. Feedback: ratings, reviews, active community

116. Automatically distributes updates

118. Very sloooowww

121. Source code: The Mozilla cross (X) Reference: http://mxr.mozilla.org/

122. #xul on irc.mozilla.org

124. HTML overlays: No more XUL

125. Sensible Javascript API: No more XPCOM

126. No more browser restarts

127. Mozilla realise that XUL and XPCOM are barriers to entry

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

131. XPFE

132. What Firefox, Thunderbird, Komodo, Songbird, etc etc are built on.

133. Use it instead of GTK, QT, or AIR.

135. The package: .xpi with install.rdf, chrome.manifest and overlay

137. The chrome and overlay points

138. No URL bar to browse chrome

139. Less documentation, smaller communities

146. Thunderbird: install.rdf <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <RDF xmlns=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot; xmlns:em=&quot;http://www.mozilla.org/2004/em-rdf#&quot;> <Description about=&quot;urn:mozilla:install-manifest&quot;> <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>

148. Use DOM Inspector to find overlay point content simple content/ overlay chrome://messenger/content/messenger.xul chrome://simple/content/menu_overlay.xul (overlay... is all on one line)

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

152. https://developer.mozilla.org/En/Extensions/Thunderbird

153. Mozilla Messaging are actively improving extension developer story

154. Mozilla Messaging are based right here in Vancouver

156. Very good choice for editing XUL, JS, etc.

157. Mostly written in Python

158. Uses PyXPCOM, which ActiveState started

159. Extensions are still in JS (but..)

163. DOM Inspector: https://addons.mozilla.org/en-US/firefox/addon/6622

164. Install them by File / Open... in Komodo.

165. Then add a Macro to start DOM Inspector:

167. Komodo: install.rdf <?xml version=&quot;1.0&quot;?> <RDF xmlns=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot; xmlns:em=&quot;http://www.mozilla.org/2004/em-rdf#&quot;> <Description about=&quot;urn:mozilla:install-manifest&quot;> <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>

171. Can write XPCOMponents in Python (on top of the usual JS and C++) var os = Components.classes['@activestate.com/koOs;1']. getService(Components.interfaces.koIOs)

173. Jeff Griffiths, Komodo hacker, is one of the organisers of Open Web Vancouver.

174. ActiveState are based in Vancouver.

175. http://wiki.openkomodo.com/index.php/Extension_Development

176. Songbird – media player

179. XPCOM Viewer

181. Extension wizard

184. Extension developer's extension

191. install.rdf

192. chrome.manifest