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.
To get started,visit the tool online orinstall it locally from npm.
Use during:
- Development
Resources
WebExtensions Example
Thewebextensions-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 theMozilla Public License 2.0.
Use during:
- Development
Resources
Coding tools
If you're looking for information about text editor in which to write your code, see theCommon questions articleAvailable text editors.
Use during:
- Development
Resources
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 thenodejs/npm tool.
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 theweb-ext run andlint 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 yourwebpack.config.js.
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.
Use during:
- Development
Resources
Testing and debugging tools
Use during:
- Development
Resources
about:debugging
This Firefox page enables you to manually install add-ons into Firefox for testing and to kickoff debugging, using theAddon Developer Tools, for any browser extension installed in Firefox.
To get started, typeabout:debugging in the Firefox address bar.
Use during:
- Testing and debugging
Resources
Addon Developer Tools
Debug your web extensions with a version of the standard Firefox developer tools. With the developer tools, you get access to apage inspector,console,debugger,network monitor,style editor,storage inspector, andaccessibility inspector.
To get started, openabout:debugging and click inspect next to the extension you want to debug.
Use during:
- Debugging
Resources
Translation tools
Use during:
- Debugging
Resources
Web Extension Translator
A tool for creating and managing_locales foldermessages.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 theonline version or install thenpm package locally.
Use during:
- Development
- Localization
Resources
Translate Web-Ext
A tool for creating and managing_locales foldermessages.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 completedmessages.json files.
To get started,visit the tool online.
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, seeDeveloping extensions for Firefox for Android.
Tags: coding debugging development guide scaffold testing tools translation webextensions
Contributors: rebloor hellosct1 ani-sha ankushduacodes
Last update: rebloor
Up Next
Develop
Choosing a Firefox version for extension development
Develop
Getting started with web-ext
Develop