Workshop Sections

Extension Development Overview

Why build Firefox extensions?

Why build Firefox extensions?

Why build Firefox extensions?

Change the Browser Experience

(from tree style tab and ubiquity)

Why build Firefox extensions?

What can they do?

OpenWeb as a Platform

Mozilla Platform Overview

XUL

Chrome vs. Content

Chrome vs. Content

Chrome vs. Content

Chrome vs. Content

XPCOM

Users trust you

More power, More responsibility

Summary

• Use all web technologies (ex. XML, XHTML, CSS, SVG, HTTP, HTTPS, JavaScript, XMLHttpRequest…)
• Read/Write local resources (files, bookmarks, history, db…)
• Read/Write bookmarks and history
• Overlay Browser UI (add buttons, menus, toolbars, dialogs, tabs, windows, preferences)
• Use modern JavaScript (ex. E4X, generator/iterator, let, getter/setter, expression closure…)

HANDS-ON – First Steps on Firefox

Create your Firefox development profile

Where is you profileDir?

Useful prefs in a development environment

Useful Firefox Extensions

Where are Firefox Extensions installed?

Bootstrap your first extension

Shadow Install your Working Dir

Check Chrome Registration

Search and Overlay

XUL overlay

firefoxOverlay.xul

   1  <?xml version="1.0" encoding="utf-8"?>
   2  <?xml-stylesheet href="chrome://maowfirenze09/skin/overlay.css" type="text/css"?>
   3  <!DOCTYPE overlay SYSTEM "chrome://maowfirenze09/locale/maowfirenze09.dtd">
   4  <overlay id="maowfirenze09-overlay"
   5           xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   6    ...
   7    <menupopup id="menu_ToolsPopup">
   8      <menuitem id="maowfirenze09-hello" label="&maowfirenze09.label;" 
   9                oncommand="maowfirenze09.onMenuItemCommand(event);"/>
  10    </menupopup>
  11    ...
  12  </overlay>

Apply your style

firefoxOverlay.xul

   1  <?xml-stylesheet href="chrome://maowfirenze09/skin/overlay.css" type="text/css"?>
   2  ...
   3    <menupopup id="menu_ToolsPopup">
   4      <menuitem id="maowfirenze09-hello" label="&maowfirenze09.label;" 
   5                oncommand="maowfirenze09.onMenuItemCommand(event);"/>
   6    </menupopup>
   7  ...

overlay.css

   1  #maowfirenze09-hello
   2  {
   3    color: red ! important;
   4  }

Add your JavaScript code

firefoxOverlay.xul

   1  <menuitem id="maowfirenze09-hello" label="&maowfirenze09.label;" 
   2                oncommand="maowfirenze09.onMenuItemCommand(event);"/>

overlay.js

   1  var maowfirenze09 = {
   2    onLoad: function() {
   3      ...
   4    },
   5    onMenuItemCommand: function(e) {
   6      ...
   7    }
   8  };

More XUL…

Extension Skeleton

PROFILE_DIR/extension/maowfirenze09

• install.rdf
• chrome.manifest
• content/*.[xul|js|…]
• defaults/preferences/*.js
• locale/[en-US|it-IT|fr-FR|…]/*.[dtd|properties]
• skin/*.css

Install.rdf

Chrome.manifest

HANDS-ON – Full Metal Firefox: an Advanced Development Environment

Traditional Debugging Techniques

Reflection

Firefox from inside

Firefox from inside

REPL loop

Explore your browser

JavaScript you may not be used to

let → (declare variables with block scope)

   1  function where_is_my_var() {
   2    var i=0;
   3    while(i<10) {
   4       var internal = 5;
   5       i++;
   6    }
   7    repl.print(i); repl.print(internal);
   8  }
   9  
  10  function where_is_my_let() {
  11    let i=0;
  12    while(i<10) {
  13       let internal = 5;
  14       i++;
  15    }
  16    repl.print(i); repl.print(internal);
  17  }

JavaScript you may not be used to

functional-style javascript → (closure, lambda and function expressions)

   1  // IMPERATIVE STYLE
   2  var input = [1, 3, 5];
   3  var results = [];
   4  for(var i=0; i<input.length; i++) {
   5     results.push(input[i] + 2);
   6  }
   7  alert(results.toSource()); // -> [3, 5, 7]
   8  
   9  // FUNCTIONAL STYLE
  10  var input = [1, 3, 5];
  11  results = input.map(function(item) item + 2);
  12  alert(results.toSource()); // -> [3, 5, 7]

JavaScript you may not be used to

getter and setter → (lazy loading, iterators/generators)

   1  var obj = {
   2     _foo: null,
   3     setFoo: function(val) { this._foo = val; },
   4     getFoo: function() { return this._foo; }
   5  };
   6  
   7  obj.setFoo(42); alert(obj.getFoo());
   8  
   9  var obj = {
  10     _foo: null,
  11     set foo(val) { this._foo = val; },
  12     get foo() { return this._foo; }
  13  };
  14  
  15  obj.foo = 42; alert(obj.foo);

JavaScript you may not be used to

E4X → (XML literal syntax in your JavaScript code)

   1  var db = <users>
   2            <user>
   3              <name>peter</name>
   4              <surname>parker</surname>
   5            </user>
   6            <user>
   7              <name>clark</name>
   8              <surname>kent</surname>
   9            </user>
  10          </users>;
  11  
  12  for each(var user in db.*) {
  13     alert(user.name + ' ' + user.surname);
  14  }

Use some XPCOM Components/Services

“Components” is the gatekeeper object (overlay.js)

   1  var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
   2                      .getService(Components.interfaces.nsIPromptService);
   3  promptService.alert(window, this.strings.getString("helloMessageTitle"),
   4                      this.strings.getString("helloMessage"));

Use some XPCOM Components/Services

System notification

   1  var srvAlert = Components.classes['@mozilla.org/alerts-service;1']
   2      .getService(Components.interfaces.nsIAlertsService);
   3  
   4  srvAlert.showAlertNotification('http://http.cdnlayer.com/.../spam.gif', 
   5                                 'Notifier', 'You have mail!', 
   6                                 false, '', null);

Use some XPCOM Components/Services

Preferences

   1  var srvPref = Components.classes['@mozilla.org/preferences-service;1']
   2      .getService(Components.interfaces.nsIPrefBranch);
   3  
   4  var prefBranch = prefs.getBranch('extensions.foobar.');
   5  
   6  prefBranch.setBoolPref('beNice', true);

Use some XPCOM Components/Services

Console Service

   1  var srvConsole = Components.classes["@mozilla.org/consoleservice;1"]
   2      .getService(Components.interfaces.nsIConsoleService);
   3  srvConsole.logStringMessage('hello, console!');

Base FUEL API

JavaScript Modules

How to learn more?

…more Firefox Extension Tutorials on DEVMO

Firefox Sidebar Tutorial on DEVMO