Extending Firefox
Developer Tools

Jeff Griffiths

Firefox Developer Tools

Apologies

Actually: devtools for creating devtools add-ons to create add-ons for devtools. with add-ons.

Current state

Some add-ons

Existing tools

Some tools and resource to get you started.

Restartless Template

  • by Devtools hacker Victor Porof
  • If you're more used to 'classic' add-ons.
  • You can even use XUL!
  • Gitub

Add-on SDK

(aka Jetpack)

  • Used by Ember Inspector and RDP Monitor
  • Can use existing Jetpack modules

Build automation with Grunt

  • automates Add-on SDK installation
  • Build your extensions with a simple command
  • Check out the Ember extension for tips on
    how to build cross-browser extensions.
  • Github

Browser Toolbox

Debug and inspect the whole browser, including add-ons!

DEMO

The FUTURE

  • Better debugging
  • Simpler development & packaging
  • Better APIs

Better Debugging

  • Add-on Debugger - focus on only your add-on
  • Easier debugging of content scripts

Easier, faster Hacking

  • Develop your extension right from a directory,
    no building to re-load!
  • No more XPIs, just a zip with a package.json
  • Proposal

Better Devtools APIs

  • Jetpack-style modules
  • Simple things are simple!
  • API Proposal

Example


const pane = new Pane({
  title: "Addon pad",
  url: "./index.html",
  onMessage: function (source, data, origin, target) {
    console.log("Forward pane message to an inspect target", data);
    target.inspectTarget.postMessage(data, target.inspectTarget.origin);
  }
});
  • Simple, Jetpack-style api
  • communication is all via postMessage
  • Toolbox UI is html5

Explanation


onMessage: function (source, data, origin, target) {
  console.log("Forward pane message to an inspect target", data);
  target.inspectTarget.postMessage(data, target.inspectTarget.origin);
}
  • source: the window the event came from, eg the panel document
  • data: any data passed
  • origin: the origin uri for the event
  • target: the toolbox's inspected target, eg the current web page

Ember Inspector

  • Not just a cross-browser add-on
  • An Ember.js app embedded into an add-on
  • Easier for Ember developers to contribute
  • DEMO

THANKS!

Slides: http://canuckistani.github.io/fosdem-2014-slides

Twitter: @FirefoxDevtools

Contact us on IRC: #jetpack, #devtools