How to Make a Firefox Extension: Beginner Guide (2026)

In 2005 building a Firefox extension meant learning XUL and packaging install.rdf files into an XPI. That system is gone. Since 2017 Firefox uses WebExtensions, the same cross-browser API that Chrome and Edge use, so it’s much easier to make a Firefox extension with plain HTML, CSS and JavaScript. Here’s a beginner walkthrough.

Quick answer: Create a folder with a manifest.json file describing your extension and a JavaScript file that does the work. Open about:debugging in Firefox, click This Firefox > Load Temporary Add-on and choose manifest.json to test it. When it’s ready, package it with Mozilla’s web-ext tool and submit it to addons.mozilla.org (AMO) for signing.

Step 1: Create the manifest

Make a folder called borderify and add manifest.json:

{
  "manifest_version": 3,
  "name": "Borderify",
  "version": "1.0",
  "description": "Adds a red border to example.com pages.",
  "content_scripts": [{
    "matches": ["*://*.example.com/*"],
    "js": ["borderify.js"]
  }]
}

Step 2: Add a script

Create borderify.js:

document.body.style.border = "5px solid red";

Step 3: Load and test

1. Type about:debugging in the address bar.
2. Click This Firefox > Load Temporary Add-on.
3. Select your manifest.json and visit example.com to see the border.
4. Use the Inspect button to open developer tools for the extension.

Step 4: Use web-ext

Mozilla’s web-ext command-line tool (install with npm) runs Firefox with your extension, reloads it on changes, lints your code and builds the package.

Step 5: Publish

• Create a developer account on addons.mozilla.org.
• Upload the zip; every extension must be signed by Mozilla, even if you distribute it yourself.
• Write a clear description and ask only for the permissions you need.

Next steps

• Add a toolbar button (action), popup or options page.
• Use the storage, tabs or contextMenus APIs.
• Most WebExtensions also run in Chrome with few changes.

Full tutorials are on MDN’s WebExtensions docs. For inspiration, browse our Firefox add-ons for web designers.

FAQ

Do I need to know programming?

Basic JavaScript is enough for simple extensions.

Can I use a Chrome extension in Firefox?

Often yes, with small changes, since both use WebExtensions.

Why does Firefox say my add-on can’t be verified?

Release versions of Firefox only install signed extensions. Submit it to AMO to get it signed.