Mozilla and the Firefox browser extension developer community have created a range of tools that can simplify and speed up your browser extension development. This page provides a summary of those tools including details on the features each offers, how to get started, where in the development cycle it fits, and links to useful resources.
Boilerplating tools
Extension scaffolding builderCreate a scaffold for your browser extensions. Provide the tool with extension name, description, and version. Then specify whether you want background and content scripts, browser and page actions, and extension options. create-web-ext then delivers a boilerplate project as a zip download, containing all the folders and files you need to start development.
To get started, visit the tool online or install it locally from npm. |
Use during:
Resources |
WebExtensions ExampleThe webextensions-examples GitHub repository is a collection browser extension examples. Each example is a complete working extension that you can install and run in Firefox. You are free to use these examples as the starting point for your browser extensions, as they are made available under the Mozilla Public License 2.0. |
Use during:
Resources |
Coding tools
web-extSpeed up browser extension development and make development tasks easier with this command line tool. This tool helps:
To get started with web-ext, install it with the nodejs/npm tool. |
Use during:
Resources |
web-ext-webpack-pluginUse this plug-in to simplify the development of extensions built using webpack. The plug-in does this by integrating the web-ext run and lint commands into the webpack process, so that the extension is linted and reloaded once webpack build completes. To get started, add the plug-in to your webpack.config.js. |
Use during:
Resources |
WebExtension browser API PolyfillWhen creating extensions you want to work in Firefox and Chrome, this library enables you to use the Firefox Promise-based APIs and have them run on Google Chrome with few, if any, changes. To get started, install using npm and load the library into the contexts where browser APIs are accessed. |
Use during:
Resources |
Testing and debugging tools
about:debuggingThis Firefox page enables you to manually install add-ons into Firefox for testing and to kickoff debugging, using the Addon Debugging Window, for any browser extension installed in Firefox.
To get started, type about:debugging in the Firefox address bar. |
Use during:
Resources |
Addon Debugging WindowDebug your browser extensions with this version of the standard Firefox developer toolbox. With Addon Debugging Window you get access to a console, debugger, scratchpad, page inspector, style editor, network monitor, performance analyzer, storage inspector, and accessibility inspector.
To get started, enable Browser Toolbox then open about:debugging and click debug next to the extension you want to debug. |
Use during:
Resources |
Translation tools
Web Extension TranslatorA tool for creating and managing
To get started, visit the online version or install the npm package locally. |
Use during:
Resources |
Translate Web-ExtA tool for creating and managing
To get started, visit the tool online. |
Use during:
Resources |
Tools for Firefox for Android
When developing browser extensions for Firefox for Android, you can make use of:
-
web-ext, to automatically load your extension to an Android device as you make code changes.
-
Addon Debugging Window, to debug your extension.
For more details, see Developing extensions for Firefox for Android.