How and Why to extend Firefox
6 likes1,868 views
The document discusses building extensions for Firefox and other Mozilla applications like Thunderbird. It explains why one would want to build an extension rather than a web or desktop app, and the different types of extensions. It provides an overview of the key files and technologies needed to build an extension, including JavaScript, XUL, XPCOM, and packaging the extension as an XPI file. It also discusses releasing and distributing extensions through addons.mozilla.org.
![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](https://image.slidesharecdn.com/owv2009-090610200628-phpapp02/85/How-and-Why-to-extend-Firefox-1-320.jpg)
How and Why to extend Firefox
- 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
- 3. Why build a Firefox extension? (rather than a webapp or desktop app)
- 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
- 7. Types of FF extension Browsing enhancements
- 9. Desktop apps
- 10. Why build browsing extensions Your app works above the level of a single site: AdBlock: Websites would never provide this
- 11. Cooliris: Image browser
- 12. Foxden: Tiling window manager To integrate your webapp into users lives: del.icio.us: Would delicious have succeeded just as a webapp?
- 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
- 16. Why build ambient apps Be where the user is. Not about browsing.
- 17. What does a user always have open? Browser, email client, IDE, media player Forecast Fox: Weather
- 18. Foxytunes: Control your media player
- 19. Status bar scientific calculator Just needs an input box
- 20. Why build desktop apps Native application: Drag and drop, file system access, sockets, wrap a native library (.so, .dll)
- 21. FF is a cross-platform GUI toolkit for Javascript.
- 22. wxWidgets, GTK, QT, AIR, or Firefox? Brief: feed reader
- 25. Firebucket Amazon S3 manager
- 26. These are not about web browsing.
- 27. ChatZilla
- 28. What Firefox provides Recent version of Javascript
- 29. Don't worry about IE / cross-browser
- 30. FF is way ahead of 'the web': SVG, Canvas.
- 31. Sound, Video. Play OGG files natively.
- 33. ... 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
- 37. FF 3.5
- 38. Only JS and Canvas
- 39. Talk: The Future of Web Applications by Ben Galbraith and Dion Almaer
- 40. Firefox extensions are not Not plugins Plugins register to display a file type: PDF reader,
- 41. media players
- 42. about:plugins Not search plugins: Search bar pulldown.
- 44. There's no money in it Very difficult to monetise an extension: No standard way, and not part of the culture
- 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
- 48. What's in a Firefox extension Code : Javascript
- 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
- 54. Extension points Need to integrate with the browser somehow: top menu
- 55. context menu
- 56. status bar, etc Write a XUL overlay A regular XUL file
- 57. 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
- 58. Let's do it!
- 59. Building a Firefox extension Graham King – Open Web Vancouver 2009 Part 2/3
- 60. Setup dev environment Create a development profile firefox -P -no-remote Install Extension Developers Extension https://addons.mozilla.org/en-US/firefox/addon/7434/
- 61. 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.
- 62. 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>
- 63. install.rdf Gets displayed in Tools / Add-ons
- 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.
- 68. Berners Lee and his robot slaves HTTP got him a knighthood
- 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)
- 74. 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
- 75. Browse the chrome with Chrome List extension
- 78. 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>
- 79. DOM Inspector: Finding an overlay point
- 80. XUL X ML U ser-interface layout L anguage
- 81. All the widgets of HTML, plus a few
- 82. More programmer friendly than HTML / CSS Layout, not semantic markup Feels similar to Adobe's MXML (Flex)
- 83. You can use HTML / CSS instead
- 84. 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>
- 85. Not 1984 'There is no Dana, only Zuul'
- 86. Most of the widgets XUL provides are available as HTML/JS
- 87. And you already know HTML.
- 88. Test our extension Find your profile directory ~/.mozilla/firefox/<stuff>.dev/extensions
- 89. http://kb.mozillazine.org/Profile_folder_-_Firefox Create a file called your id from install.rdf touch [email_address] Edit it to contain one line, the path to the directory containing the install.rdf /home/graham/Projects/simpleff
- 90. Make our extension say hello Tools/Extension Developer / Reload all chrome <?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>
- 91. 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
- 92. 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!
- 93. Now we just need to call SP.openWindow
- 94. 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>
- 95. Chrome / Native permissions It's just HTML and Javascript, but we have chrome privileges .
- 96. This means we are allowed to do anything Firefox is allowed to do.
- 97. We do these exciting things using XPCOM.
- 98. XPCOM – The cool stuff XPCOM: Cross Platform Component Object Model
- 99. Similar to CORBA and Microsoft COM
- 100. How Javascript accesses the interesting stuff
- 102. Cast to the desired interface
- 103. Two types: Singletons (getService) and regular objects (createInstance) Components.classes["@mozilla.org/file/local;1"]. createInstance(Components.interfaces.nsILocalFile);
- 104. XPCOM service example function getHomeDir() { var dirService = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties); var homeDirFile = dirService.get("Home",Components.interfaces.nsIFile); dump(homeDirFile.path +'\n'); return homeDirFile.path; }
- 105. What services are available? Google, developer.mozilla.org
- 106. Enumerate in JS
- 107. Use XPCOM Viewer extension for (var name in Components.classes) { dump(name +'\n'); } for (var name in Components.interfaces) { dump(name +'\n'); }
- 108. Write your own XPCOMponent In JS or C++
- 109. Wrap a native library in XPCOM
- 110. Package your extension .xpi is zip
- 111. zip up your project dir
- 112. or use Extension Developer
- 113. Release your extension mozdev.org will host it for you. Web pages, CVS and Mercurial
- 114. Upload to addons.mozilla.org Huge audience
- 115. Feedback: ratings, reviews, active community
- 117. Every release is manually reviewed Ensures quality
- 118. Very sloooowww
- 119. Resources developer.mozilla.org Prefix search with 'mdc'
- 120. NOT xulplanet.org Other people's extensions. Unzip the jar
- 121. Source code: The Mozilla cross (X) Reference: http://mxr.mozilla.org/
- 123. Jetpack: Extensions 2.0 Mozilla Labs project, very new
- 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
- 129. The what? Mozilla Application Framework
- 130. The framework previously know as: XPToolkit
- 131. XPFE
- 132. What Firefox, Thunderbird, Komodo, Songbird, etc etc are built on.
- 133. Use it instead of GTK, QT, or AIR.
- 134. Comparing to Firefox What's the same The tools: XUL, HTML, CSS, Javascript
- 135. The package: .xpi with install.rdf, chrome.manifest and overlay
- 136. The XPCOM way of getting services / objects What's different: The XPCOM services provided
- 137. The chrome and overlay points
- 138. No URL bar to browse chrome
- 139. Less documentation, smaller communities
- 140. Thunderbird Previously Netscape Messenger
- 141. New company: Mozilla Messaging David Ascher's talk
- 142. Reaching out to extension developers Docs and extension support very patchy
- 143. Thunderbird: Dev env Create dev profile:
- 144. Install Extension Developer Turn on Debugging Preferences Dom Inspector
- 145. ThunderBrowse To browse chrome URLs thunderbird -P -no-remote
- 146. 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>
- 147. Thunderbird: chrome.manifest What you overlay changes
- 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="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>
- 150. Thunderbird: Test it Find your profile directory ~/.mozilla-thunderbird/xxxxx-dev/extensions Create file same as your id [email_address] Single line, path to dir with your install.rdf /home/graham/Projects/tbird/simple
- 151. Thunderbird: Help Me The docs are sparse, so look at other's extensions, or the source code.
- 153. Mozilla Messaging are actively improving extension developer story
- 154. Mozilla Messaging are based right here in Vancouver
- 155. Komodo IDE from ActiveState. Open source.
- 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..)
- 160. 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
- 161. Set KOMODO_USERDATADIR and run: KOMODO_USERDATADIR=/home/graham/.komodoedit/dev /usr/local/Komodo-Edit-5/bin/komodo (all on one line)
- 162. Komodo: Setup dev environment Extension developer's extension: http://community.activestate.com/node/1824
- 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:
- 166. Toolbox / Add / New Macro window.openDialog("chrome://inspector/content/", "_blank", "chrome,all,dialog=no");
- 167. 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>
- 168. Komodo: chrome.manifest Can also use Komodo's built in template: File / New / Project From Template... / Komodo / Komodo Extension content helloko content/ overlay chrome://komodo/content/komodo.xul chrome://helloko/content/overlay.xul (overlay.. goes all on one line)
- 169. Komodo: overlay.xul In extensions dir: ~/.komodoedit/dev/5.1/host-rufus/XRE/extensions Add the usual single line file <?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>
- 170. Komodo: Python Some Python io modules wrapped as JS os, os.path, glob, shutil, maybe more Some partially wrapped urllib, time, maybe more Komodo will auto-complete all these for you
- 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)
- 172. Komodo: More Can also add support for new (computer) languages
- 173. Jeff Griffiths, Komodo hacker, is one of the organisers of Open Web Vancouver.
- 174. ActiveState are based in Vancouver.
- 176. Songbird – media player
- 177. 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
- 178. Songbird developer extension Has everything: Refresh UI
- 179. XPCOM Viewer
- 180. DOM Inspector And more: XUL periodic table
- 181. Extension wizard
- 182. Songbird extension Just like the others: install.rdf, chrome.manifest, xul overlay, javascript A great walkthrough: http://wiki.songbirdnest.com/Developer/Articles/Getting_Started/Developing_Extensions
- 183. Songbird loves you The best extension developer story by far One place to find docs
- 186. Your app on xulrunner An extension can be re-worked to run on its own, using xulrunner.
- 187. Extend your webapp out to the desktop: Firefox extension or XULRunner app
- 188. An open alternative to Adobe AIR Flickr Uploadr is built on the Mozilla Application Framework.
- 189. Conclusion Mozilla Application Platform is: Easy once you get past the install.rdf magic
- 190. The key to desktop apps in Javascript To build an extension: Setup your dev environment
- 191. install.rdf
- 192. chrome.manifest
- 193. XUL overlay, JS, etc Start with Firefox or Songbird.