From Idea to AMO: Using Firefox Addon Maker to Publish Extensions

Speed Up Development with These Firefox Addon Maker Tips and Shortcuts

Building Firefox extensions can be rewarding — but repetitive setup, debugging, and packaging steps can slow you down. The right tips and shortcuts let you iterate faster, produce higher-quality add-ons, and publish with less friction. This guide focuses on practical, actionable techniques you can apply immediately when using Firefox Addon Maker workflows (WebExtensions) and related tooling.

1. Start with a solid template

• Use a minimal, well-structured boilerplate that includes manifest.json, background/service worker, options page, and content script stubs. This avoids recreating common files each time.
• Include a clear folder layout: src/, assets/, tests/, dist/.
• Preconfigure linting and formatting (ESLint + Prettier) in the template to keep code consistent from day one.

2. Automate repetitive tasks with npm scripts

• Define standard scripts in package.json for common tasks:
  • “build”: bundle and copy files to dist/
  • “watch”: rebuild on change
  • “lint”: run ESLint
  • “test”: run unit tests
  • “pack”: produce a signed or unsigned .xpi for distribution
• Combine scripts with concurrently/shell to run multiple watchers (dev server + webpack) during development.

3. Use a fast bundler and smart source maps

• Choose a fast bundler like Vite, esbuild, or webpack 5 with caching. esbuild/Vite are excellent for speedy incremental builds.
• Enable incremental or watch mode so only changed modules rebuild.
• Configure source maps for background scripts and content scripts to make debugging in about:debugging or the browser console straightforward.

4. Leverage hot-reload for content scripts

• Implement a small reload helper:
  • Inject a short content script that listens for a reload message from your dev server and re-injects scripts or reloads the page.
  • Alternatively, use extension-development tools/plugins that trigger a fast reload when files change.
• This avoids manual re-installation and speeds iterative testing.

5. Use about:debugging and WebExtension Toolbox effectively

• about:debugging → This Firefox → Temporary Extensions is your fastest loop for testing unsigned .xpi. Load the extension and then:
  • Open the background/service worker console for runtime logs.
  • Use the extension’s inspect views for popup/options debugging.
• Pin devtools to quickly access content script consoles and network panels while iterating.

6. Streamline permissions and manifest changes

• Keep manifest edits minimal during development. Use permissive but safe defaults in dev (e.g., host permissions for localhost and target sites) and tighten before publishing.
• Version-manage manifest changes to avoid unexpected behavior when reloading temporary extensions.

7. Automate signing and publishing

• Use the web-ext tool for packaging, signing, and uploading:
  • web-ext build — to create an .xpi
  • web-ext sign — to sign with Mozilla (requires API keys)
  • web