How I Built and Published My First Firefox Extension

I built Tab Manager & Session Saver as a side project. Here's what I learned about building and shipping a Firefox extension.

The Core APIs You Need

Firefox extensions use the WebExtension API, which is largely cross-compatible with Chrome. For a tab management extension, the main APIs are:

// Query all open tabs browser.tabs.query({ currentWindow: true }); // Get all windows browser.windows.getAll({ populate: true }); // Save data locally (persistent across restarts) browser.storage.local.set({ sessions: [...] }); browser.storage.local.get('sessions'); // Open a URL in a new tab browser.tabs.create({ url: 'https://example.com' }); // Close a tab browser.tabs.remove(tabId);

Firefox's API uses browser.* (with Promise-based async). Chrome uses chrome.* (with callbacks, though Chrome now also supports Promises in Manifest V3). For cross-browser compatibility, you can use the webextension-polyfill library.

The Manifest

The manifest.json is the entry point. For a popup extension that accesses tabs:

{ "manifest_version": 2, "name": "Tab Manager", "version": "1.0", "description": "Save and restore named tab sessions", "permissions": [ "tabs", "storage" ], "browser_action": { "default_popup": "popup.html", "default_icon": "icon.png" } }

Note on Manifest V3: Firefox supports both MV2 and MV3. Chrome is phasing out MV2. For extensions that need tabs and storage permissions (like a session manager), MV2 is still the simpler choice if you target Firefox. For cross-browser MV3 support, the API changes are mostly about background scripts (service_worker instead of scripts).

The Popup

The popup (popup.html) is the extension's UI. It's a regular HTML page that loads when the toolbar icon is clicked. For a sessions list:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="popup.css"> </head> <body> <div id="sessions-list"></div> <button id="save-btn">Save current tabs</button> <script src="popup.js"></script> </body> </html> 
// popup.js document.getElementById('save-btn').addEventListener('click', async () => { const tabs = await browser.tabs.query({ currentWindow: true }); const session = { name: prompt('Session name:') || 'Unnamed', tabs: tabs.map(t => ({ url: t.url, title: t.title })) }; const { sessions = [] } = await browser.storage.local.get('sessions'); sessions.push(session); await browser.storage.local.set({ sessions }); renderSessions(); }); async function renderSessions() { const { sessions = [] } = await browser.storage.local.get('sessions'); const list = document.getElementById('sessions-list'); list.innerHTML = sessions.map((s, i) => `<div>${s.name} (${s.tabs.length} tabs) <button data-i="${i}">Restore</button></div>` ).join(''); list.querySelectorAll('button').forEach(btn => { btn.addEventListener('click', async () => { const { sessions } = await browser.storage.local.get('sessions'); const session = sessions[parseInt(btn.dataset.i)]; for (const tab of session.tabs) { await browser.tabs.create({ url: tab.url }); } }); }); } renderSessions();

This is the core. Real implementations add: delete/rename sessions, open in new window, error handling for invalid URLs.

Local Development

Load the extension in Firefox without packaging:

  1. Go to about:debugging#/runtime/this-firefox
  2. Click "Load Temporary Add-on"
  3. Select your manifest.json

The extension loads and runs until Firefox is closed. Changes to popup HTML/JS take effect on the next click of the toolbar icon (no reload needed). Background script changes require "Reload" in about:debugging.

Submitting to AMO

AMO (addons.mozilla.org) is Mozilla's extension store. The review process:

  1. Create a developer account at addons.mozilla.org/developers
  2. Submit your extension ZIP (the extension folder compressed)
  3. Source code review: AMO reviews extensions for security and policy compliance. Extensions with minified or obfuscated code must include the original source for review.
  4. Wait for review (currently 1-4 weeks for self-hosted; faster for AMO-hosted)

Self-hosted vs AMO-hosted: AMO-hosted extensions get updates through AMO. Self-hosted extensions manage their own updates (you provide an update URL in the manifest). AMO-hosted is simpler for most use cases.

Policies to know:

  • Extensions can't collect user data without disclosure and consent
  • Remote code execution is prohibited
  • Extensions must do what the description says

What I'd Do Differently

Use Promises everywhere from the start: I initially used callback-style code in some places, which led to inconsistent error handling. The browser.* API is fully Promise-based — use async/await throughout.

Design the storage schema first: I changed my storage format twice. Session data is simple (name + list of tabs), but planning the schema upfront avoids migrations.

Write the README before the extension: Forces you to think about what the extension actually does and why, which sharpens the implementation.

The finished extension is Tab Manager & Session Saver on AMO. Source is available if you want to look at a real implementation.