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

• Experimental Toolbox API
• Several interesting add-ons

Some add-ons

• JSTerm
• RDP Monitor
• Ember Inspector
• Theme My Site
• ...probably more!

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