Firefox DevTools Extension Examples
This repository contains extensions for Firefox native developer tools showing how to build extensions and use existing platform API.
Use JPM to run example extensions.
Run with Firefox Nightly on OSX:
jpm run -b /Applications/FirefoxNightly.app
This example shows basic architecture of an extension for Firefox developer tools. It handles basic toolbox initialization events and registers a new panel.
`toolbox-ready` `toolbox-destroy` `toolbox-destroyed`
This extension shows how to implement new theme for developer tools Toolbox.
This extension shows how to implement tools/features that can be used
to debug/inspect remote devices. Learn how to properly implement both:
the client and sever side of new tool. Remotable feature in this extension
is implemented as a
Actor ActorFront registerGlobalActor()
This extension shows how to create a tab actor. If multiprocess support is active tab actors run within the child process (global actors run within the parent process).
Actor ActorFront registerTabActor()
This extension shows how to intercept and modify logs in the Console panel.
An example extension showing how to integrate standard web technologies with an extension.
- Bootstrap: http://getbootstrap.com/
- React: http://facebook.github.io/react/
- React Bootstrap: http://react-bootstrap.github.io/components.html
An example extension showing how to communicate between chrome and content scopes.
addMessageListener() removeMessageListener() sendAsyncMessage()
An example extension showing how to send DOM node from the backed to the client.
Actor registerTabActor() Actor Events NodeFront
This extension shows how to implement backend actor register and unregister it. Learn how to properly implement both the client and sever side. This example also shows how to communicate between chrome and content scope through MessageChannel.
Actor ActorFront registerTabActor() MessageChannel()
An example extension showing how to access 'window' global in the web page and also register new Console command-line commands.
Actor registerTabActor() Toolbox Events WebConsoleCommands ToolboxOverlay
An example showing how to perform custom analysis of data collected by the Network panel. Check out how to get all data as HAR object. See also: http://www.softwareishard.com/blog/har-12-spec/
HAR HARBuilder HARExporter ToolboxOverlay
An example extension showing how to use Model View Controller (MVC) pattern in context of an extension for Firefox DevTools. (based on HelloWorld example above)
Panel Tool MessageManager Frame script Mode View Controller Chrome & Content scope communication
Basic example extension showing how to use ReactJS+Redux to implement an extension for Firefox developer tools. The example is taken and adapted from the official Redux docs. Recommended mainly for web developers who want to use existing knowledge and build Firefox developer tools extensions on top of standard web technologies.
Firebug.SDK ReactJS Redux
- Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
- Add-on SDK Coding Style: https://github.com/mozilla/addon-sdk/wiki/Coding-style-guide
- DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
- DevTools Extension Examples: https://github.com/firebug/devtools-extension-examples
- Hacking on core DevTools: https://wiki.mozilla.org/DevTools/Hacking