Develop

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.

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.

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

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

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

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.

About Debugging

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

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.

Web Extension Translator

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

Get started

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.

Translate Web-ext

To get started, visit the tool online.

Get started

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.