Load Unpacked Extensions in Firefox via about:debugging

This article provides a step-by-step guide for developers on how to load an unpacked browser extension directly from a local folder in the Mozilla Firefox web browser. By utilizing the built-in about:debugging interface, you can quickly install temporary add-ons, test functionality, and reload code changes in real-time without needing to package or sign your extension first.

Prerequisites

Before loading your extension into Firefox, ensure that all your extension files are saved in a single local directory on your computer. This folder must contain a valid manifest.json file, as Firefox uses this file to read the extension's configuration and permissions.

Step-by-Step Guide to Loading the Extension

Follow these steps to load your unpacked extension from your local folder:

  1. Open the Firefox Browser: Launch Mozilla Firefox on your computer.
  2. Access the Debugging Page: Click on the address bar at the top of the browser, type about:debugging, and press Enter.
  3. Select Your Browser Instance: In the left-hand sidebar of the page that loads, click on This Firefox (this may be labeled as This Nightly or This Developer Edition depending on the version of Firefox you are using).
  4. Initiate the Upload: Locate the Temporary Extensions section on the main panel and click the Load Temporary Add-on... button.
  5. Select Your Extension File: A file browser window will open. Navigate to the local folder containing your unpacked extension.
  6. Load the Manifest: Click on the manifest.json file (or any other file inside your extension's root directory) and click Open.

Your unpacked extension is now installed and active in the browser. It will immediately appear under the Temporary Extensions list, and its icon (if configured) will show up in the Firefox toolbar.

Managing Your Unpacked Extension

Once your extension is loaded, the about:debugging page gives you several tools to manage it during development:

  • Inspect: Click this button to open the Firefox Developer Tools specifically for your extension. This allows you to view console logs, debug background scripts, and inspect popups.
  • Reload: If you make changes to your local code inside your folder, click the Reload button to immediately apply those changes in the browser without having to re-select the file.
  • Remove: Click this button to instantly uninstall the temporary extension from Firefox.

Note that any extension loaded using this method is temporary. It will remain active only for your current browsing session and will be automatically removed when you completely close the Firefox browser.