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.
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.
To get started, visit the tool online or install it locally from npm.
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.
If you're looking for information about text editor in which to write your code, see the Common questions article Available text editors.
Speed 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 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.
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.
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.
To get started, type about:debugging in the Firefox address bar.
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.
To get started, enable Browser Toolbox then open about:debugging and click debug next to the extension you want to debug.
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.
To get started, visit the online version or install the npm package locally.
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.
To get started, visit the tool online.
When developing browser extensions for Firefox for Android, you can make use of:
For more details, see Developing extensions for Firefox for Android.
Develop
Develop
Develop