How and Why to Extend Firefox in Javascript
 (and Thunderbird, Komodo, and Songbird)

     Graham King <graham@gkgk.org>
 ...
Firefox extensions: Why and How
                  Graham King – Open Web Vancouver 2009
                                Pa...
Why build a Firefox extension?
 (rather than a webapp or desktop app)
 Because you'll target a platform with 270 million
 ...
Types of FF extension

 Browsing enhancements


 Ambients apps


 Desktop apps



Graham King                             ...
Why build browsing extensions
 Your app works above the level of a single site:
        AdBlock: Websites would never prov...
Cooliris
 A specialized network client for consuming images – aka an image browser




Graham King                        ...
Why build ambient apps
 Be where the user is. Not about browsing.
 What does a user always have open?
        Browser, ema...
Why build desktop apps
 Native application: Drag and drop, file system
  access, sockets, wrap a native library (.so, .dll...
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':
 ...
http://people.mozilla.com/~vladimir/demos/photos.svg




Graham King                                                    11...
https://developer.mozilla.org/En/Manipulating_video_using_canvas


                                      Green screen
    ...
Firefox extensions are not
    Not plugins
        Plugins register to display a file type:
                  PDF reader,
...
There's no money in it
 Very difficult to monetise an extension: No
  standard way, and not part of the culture
 Because o...
What's in a Firefox extension
Code: Javascript
Layout: XUL, HTML
Media: Images, CSS
i18n: Resource bundles by (human) lang...
Extension points
 Need to integrate with the browser somehow:
        top menu
        context menu
        status bar, et...
Key files
 install.rdf
        Install manifest: Name, version, etc
 chrome.manifest
        Attaches your overlay(s)
 con...
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 Extensio...
Turn on debugging prefs
 Tools / Extension Developer / Enable Debugging
  Preferences
It changes these preferences:

 java...
install.rdf
      <?xml version=quot;1.0quot;?>
      <RDF:RDF xmlns:em=quot;http://www.mozilla.org/2004/em­rdf#quot;
    ...
install.rdf
 Gets displayed in Tools / Add-ons
 The scariest part of FF extensions
 Extension Builder will generate it for...
Berners Lee and his robot slaves
 HTTP got him a knighthood
 Next invention could get him into the House of
  Lords
 Yes, ...
chrome.manifest



 content simple   content/
 overlay chrome://browser/content/browser.xul 
                           ch...
chrome.manifest
 chrome is everything in the browser that isn't the
   web page:
        Menus, toolbars, icons, scrollbar...
The chrome: scheme




Graham King                            27
http://gkgk.org
content/menu_overlay.xul
    <?xml version=quot;1.0quot;?>
    <overlay id=quot;simple_menuitemquot; 
              xmlns=...
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
   ...
XUL
                   <?xml version=quot;1.0quot;?>

                   <window title=quot;Examplequot;
                 ...
Not 1984
                      'There is no Dana, only
                        Zuul'
                      Most of the wid...
Test our extension
 Find your profile directory
        ~/.mozilla/firefox/<stuff>.dev/extensions
        http://kb.mozill...
Make our extension say hello
    <?xml version=quot;1.0quot;?>
    <overlay id=quot;simple_menuitemquot; 
              xm...
content/main.xhtml
  An HTML only window. No XUL required.
    <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.1//ENquot;
 ...
content/main.js
    var SP = {
        openWindow: function() {
     openDialog('chrome://simple/content/main.xhtml');
   ...
Open the window
<?xml version=quot;1.0quot;?>
<overlay id=quot;simple_menuitemquot; 
          xmlns=quot;http://www.mozil...
Chrome / Native permissions
 It's just HTML and Javascript, but we have
    chrome privileges.
 This means we are allowed ...
XPCOM – The cool stuff
 XPCOM: Cross Platform Component Object Model
 Similar to CORBA and Microsoft COM
 How Javascript a...
XPCOM service example
 function getHomeDir() {

  var dirService = 
 Components.classes[quot;@mozilla.org/file/directory_s...
What services are available?
  Google, developer.mozilla.org
  Enumerate in JS
        for (var name in Components.classes...
Write your own XPCOMponent
 In JS or C++
 Wrap a native library in XPCOM




Graham King                           42
http...
Package your extension
            .xpi is zip
            zip up your project dir
            or use Extension Developer
...
Release your extension
 mozdev.org will host it for you. Web pages, CVS
  and Mercurial
 Upload to addons.mozilla.org
    ...
Resources
 developer.mozilla.org
        Prefix search with 'mdc'
        NOT xulplanet.org
 Other people's extensions. Un...
Jetpack: Extensions 2.0
 Mozilla Labs project, very new


 HTML overlays: No more XUL
 Sensible Javascript API: No more XP...
Extending Mozilla Application Framework
             applications
    Graham King – Open Web Vancouver 2009
              ...
The what?
 Mozilla Application Framework
 The framework previously know as:
        XPToolkit
        XPFE
        What Fi...
Comparing to Firefox
  What's the same
        The tools: XUL, HTML, CSS, Javascript
        The package: .xpi with instal...
Thunderbird
 Previously Netscape Messenger
 New company: Mozilla Messaging
        David Ascher's talk
        Reaching ou...
Thunderbird: Dev env
 Create dev profile:
           thunderbird ­P ­no­remote

 Install
        Extension Developer
     ...
Thunderbird: install.rdf
      <?xml version=quot;1.0quot; encoding=quot;UTF­8quot;?>
      <RDF xmlns=quot;http://www.w3....
Thunderbird: chrome.manifest

         content    simple    content/
         overlay    chrome://messenger/content/messen...
Thunderbird: menu_overlay.xul

<?xml version=quot;1.0quot;?>
<overlay id=quot;simple_menuitemquot; 
   xmlns=quot;http://w...
Thunderbird: Test it
 Find your profile directory
        ~/.mozilla-thunderbird/xxxxx-dev/extensions
 Create file same as...
Thunderbird: Help Me
 The docs are sparse, so look at other's
  extensions, or the source code.
 https://developer.mozilla...
Komodo
 IDE from ActiveState. Open source.
 Very good choice for editing XUL, JS, etc.
 Mostly written in Python
 Uses PyX...
Komodo: Setup dev environment
 Find your profile directory
        http://docs.activestate.com/komodo/5.0/trouble.html#
  ...
Komodo: Setup dev environment
 Extension developer's extension:
  http://community.activestate.com/node/1824
 DOM Inspecto...
Komodo: install.rdf
 <?xml version=quot;1.0quot;?>
 <RDF xmlns=quot;http://www.w3.org/1999/02/22­rdf­syntax­ns#quot;
     ...
Komodo: chrome.manifest
    content helloko content/
    overlay chrome://komodo/content/komodo.xul 
                     ...
Komodo: overlay.xul
 <?xml version=quot;1.0quot;?>
 <overlay id=quot;helloOverlayquot;
          xmlns=quot;http://www.moz...
Komodo: Python
 Some Python io modules wrapped as JS
        os, os.path, glob, shutil, maybe more
              var os = ...
Komodo: More
 Can also add support for new (computer)
  languages
 Jeff Griffiths, Komodo hacker, is one of the
   organis...
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 ...
Songbird developer extension
                         Has everything:
                           Refresh UI
              ...
Songbird extension
 Just like the others:
        install.rdf, chrome.manifest, xul overlay, javascript
 A great walkthrou...
Songbird loves you
                  http://wiki.songbirdnest.com/Developer/Developer_Intro/Extensions


The best extensio...
Your app on xulrunner
 An extension can be re-worked to run on its own,
  using xulrunner.
 Extend your webapp out to the ...
Conclusion
 Mozilla Application Platform is:
       Easy once you get past the install.rdf magic
       The key to desktop...
Upcoming SlideShare
Loading in …5
×

How and Why to extend Firefox

4,811 views

Published on

Presented at Open Web Vancouver, Friday 12th June 2009

Published in: Technology
  • Be the first to comment

How and Why to extend Firefox

  1. 1. 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
  2. 2. Firefox extensions: Why and How Graham King – Open Web Vancouver 2009 Part 1/3 Graham King 2 http://gkgk.org
  3. 3. 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
  4. 4. Types of FF extension Browsing enhancements Ambients apps Desktop apps Graham King 4 http://gkgk.org
  5. 5. 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
  6. 6. Cooliris A specialized network client for consuming images – aka an image browser Graham King 6 http://gkgk.org
  7. 7. 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
  8. 8. 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
  9. 9. ChatZilla Graham King 9 http://gkgk.org
  10. 10. 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
  11. 11. http://people.mozilla.com/~vladimir/demos/photos.svg Graham King 11 http://gkgk.org
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Let's do it! Graham King 18 http://gkgk.org
  19. 19. Building a Firefox extension Graham King – Open Web Vancouver 2009 Part 2/3
  20. 20. 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
  21. 21. 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
  22. 22. install.rdf <?xml version=quot;1.0quot;?> <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­manifestquot;                    em:id=quot;simple@darkcoding.netquot;                    em:name=quot;Simple Onequot;                    em:version=quot;0.1quot;                    em:creator=quot;Graham Kingquot;                    em:description=quot;Some text herequot;>     <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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. The chrome: scheme Graham King 27 http://gkgk.org
  28. 28. content/menu_overlay.xul <?xml version=quot;1.0quot;?> <overlay id=quot;simple_menuitemquot;  xmlns=quot;http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xulquot;>     <menupopup id=quot;menu_ToolsPopupquot;>         <menuitem label=quot;Speak to mequot;  insertbefore=quot;sanitizeSeparatorquot; />     </menupopup>   </overlay> Graham King 28 http://gkgk.org
  29. 29. DOM Inspector: Finding an overlay point Graham King 29 http://gkgk.org
  30. 30. 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
  31. 31. XUL <?xml version=quot;1.0quot;?> <window title=quot;Examplequot; xmlns=quot;http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xulquot;> <vbox> <hbox>Name: <textbox /></hbox> <hbox> <button id=quot;yesquot; label=quot;Yesquot;/> <button id=quot;noquot; label=quot;Noquot;/> </hbox> <progressmeter mode=quot;determinedquot; value=quot;70quot;/> </vbox> </window> Graham King 31 http://gkgk.org
  32. 32. 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
  33. 33. 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
  34. 34. Make our extension say hello <?xml version=quot;1.0quot;?> <overlay id=quot;simple_menuitemquot;  xmlns=quot;http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xulquot;>     <menupopup id=quot;menu_ToolsPopupquot;>         <menuitem label=quot;Speak to mequot;  insertbefore=quot;sanitizeSeparatorquot; oncommand=quot;alert('Hello Vancouver!');quot; />     </menupopup>   </overlay> Tools/Extension Developer / Reload all chrome Graham King 34 http://gkgk.org
  35. 35. content/main.xhtml An HTML only window. No XUL required. <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.1//ENquot;                    quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>     <head>         <title>.bashrc editor</title>         <script src=quot;http://ajax.googleapis.com/ ajax/libs/jquery/1.3.2/jquery.min.jsquot; />         <script src=quot;main.jsquot; />     </head>        <body>         <form action=quot;quot; method=quot;getquot;>             <textarea id=quot;texteditorquot; name=quot;texteditorquot;  cols=quot;60quot; rows=quot;30quot;>Loading...</textarea>             <input id=quot;submitquot; type=quot;submitquot; value=quot;Savequot; />         </form>     </body> </html> Browse: chrome://simple/content/main.xhtml Graham King 35 http://gkgk.org
  36. 36. 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
  37. 37. Open the window <?xml version=quot;1.0quot;?> <overlay id=quot;simple_menuitemquot;  xmlns=quot;http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xulquot;>  <script src=quot;main.jsquot; />    <menupopup id=quot;menu_ToolsPopupquot;>         <menuitem label=quot;Edit .bashrcquot;  insertbefore=quot;sanitizeSeparatorquot; oncommand=quot;SP.openWindow();quot; />     </menupopup>   </overlay> Graham King 37 http://gkgk.org
  38. 38. 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
  39. 39. 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[quot;@mozilla.org/file/local;1quot;]. createInstance(Components.interfaces.nsILocalFile); Graham King 39 http://gkgk.org
  40. 40. XPCOM service example function getHomeDir() {  var dirService =  Components.classes[quot;@mozilla.org/file/directory_servi ce;1quot;].getService(Components.interfaces.nsIProperties );  var homeDirFile =  dirService.get(quot;Homequot;,Components.interfaces.nsIFile);    dump(homeDirFile.path +'n');              return homeDirFile.path; } Graham King 40 http://gkgk.org
  41. 41. 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
  42. 42. Write your own XPCOMponent In JS or C++ Wrap a native library in XPCOM Graham King 42 http://gkgk.org
  43. 43. Package your extension .xpi is zip zip up your project dir or use Extension Developer Graham King 43 http://gkgk.org
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. Extending Mozilla Application Framework applications Graham King – Open Web Vancouver 2009 Part 3/3
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. Thunderbird: install.rdf <?xml version=quot;1.0quot; encoding=quot;UTF­8quot;?> <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­manifestquot;>     <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
  53. 53. 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
  54. 54. Thunderbird: menu_overlay.xul <?xml version=quot;1.0quot;?> <overlay id=quot;simple_menuitemquot;  xmlns=quot;http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xulquot;>     <menupopup id=quot;menu_HelpPopupquot;>         <menuitem label=quot;Say Helloquot;  insertbefore=quot;menu_HelpAboutSeparatorquot;  oncommand=quot;alert('Hello!');quot; />     </menupopup>   </overlay> Graham King 54 http://gkgk.org
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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(quot;chrome://inspector/content/quot;,                    quot;_blankquot;,                     quot;chrome,all,dialog=noquot;);  Graham King 59 http://gkgk.org
  60. 60. Komodo: install.rdf <?xml version=quot;1.0quot;?> <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­manifestquot;>         <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
  61. 61. 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
  62. 62. Komodo: overlay.xul <?xml version=quot;1.0quot;?> <overlay id=quot;helloOverlayquot;          xmlns=quot;http://www.mozilla.org/keymaster/                         gatekeeper/there.is.only.xulquot;>   <menupopup id=quot;popup_toolsquot;>     <menuitem label=quot;Say helloquot;                insertbefore=quot;menu_addons_separatorquot;        oncommand=quot;alert('Hello Komodo Vancouver!');quot;/>   </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
  63. 63. 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
  64. 64. 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
  65. 65. Songbird – media player Graham King 65 http://gkgk.org
  66. 66. 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
  67. 67. Songbird developer extension Has everything: Refresh UI XPCOM Viewer DOM Inspector And more: XUL periodic table Extension wizard Graham King 67 http://gkgk.org
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. 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

×