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.
However, starting with Chrome 148, Chrome supports the browser namespace, except in extensions that include a DevTools page. That limitation was removed in Chrome 152 (see Chrome bug 500769389), and the browser namespace became available to all Chrome extensions.
This means that all major browsers use the browser namespace and return promises for asynchronous functions. This polyfill is a no-op in Chrome 148 and later.
If you want to enable your extension for Chrome 147 or earlier, get started by installing with npm and loading the library in 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 Developer Tools, for any browser extension installed in Firefox.
To get started, type about:debugging in the Firefox address bar.
Debug your web extensions with a version of the standard Firefox developer tools. With the developer tools, you get access to a page inspector, console, debugger, network monitor, style editor, storage inspector, and accessibility inspector.
To get started, open about:debugging and click inspect 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