Browser Extension Development Tools

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 builder

Create 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.

Screenshot of the extension scaffold builder's homepage

To get started, visit the tool online or install it locally from npm.

Use during:

  • Development

Resources

WebExtensions Example

The 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:

  • Development

Resources

Coding tools

web-ext

Speed up browser extension development and make development tasks easier with this command line tool. This tool helps:

  • automatically reload and restart your extension in Firefox, as you make code changes.

  • launch your extension to any installed version of Firefox, including into Firefox for Android.

  • check your extension’s manifest and code for common errors.

  • package your extension ready for submission to AMO.

  • sign your extension for self-hosted distribution.

To get started with web-ext, install it with the nodejs/npm tool.

Get started

Use during:

  • Development

  • Testing

  • Publication

Resources

web-ext-webpack-plugin

Use 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.

Get started

Use during:

  • Development

Resources

WebExtension browser API Polyfill

When 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.

Get started

Use during:

  • Development

Resources

Testing and debugging tools

about:debugging

This 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.

Screenshot of the about:debugging page

To get started, type about:debugging in the Firefox address bar.

Use during:

  • Testing and debugging

Resources

Addon Debugging Window

Debug 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.

Screenshot of the addon debugging window

To get started, enable Browser Toolbox then open about:debugging and click debug next to the extension you want to debug.

Get started

Use during:

  • Debugging

Resources

Translation tools

Web Extension Translator

A tool for creating and managing _locales folder messages.json files. Import browser extensions from GitHub or a browser extension zip file, compare translations, add new locales, export updated translations, and more.

Screenshot showing translation in progress in the Web Extension Translator

To get started, visit the online version or install the npm package locally.

Get started

Use during:

  • Development

  • Localization

Resources

Translate Web-Ext

A tool for creating and managing _locales folder messages.json files. Import previous and current source files as well as the destination file, with options to import from a URL or local file. See details of changes requiring translation, save work in progress locally, and export completed messages.json files.

Screenshot showing translation in progress in Translate Web-Ext

To get started, visit the tool online.

Get started

Use during:

  • Development

  • Localization

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.

Document Tags and Contributors

Contributors to this page: rebloor
Last updated by: rebloor,