How I Built a Tab Manager Extension for Firefox (Zero Dependencies, MV3)

#firefox #productivity #javascript #webextensions

I've been building Firefox extensions for the past year, and the Tab Manager & Session Saver is the one I use every day myself. Here's what I built and why.

The Problem

You know the drill. You have 40 tabs open researching a topic, your browser crashes, and you lose half of them. Bookmarks don't work — they're permanent. I needed something temporary: "save this pile of tabs so I can get back to them later."

What I Built

Tab Manager & Session Saver (free on AMO) does three things:

Save a session — one click captures all open tabs as a named snapshot
Restore a session — open all tabs from a saved snapshot with one click
Manage open tabs — see all tabs, search them, close duplicates

No account. No sync. No subscription. Sessions stored locally.

Technical Decisions

Manifest V3

All new Firefox extensions should use MV3. The main change is using browser.action instead of browser.browserAction. For a tab manager, the core browser.tabs API is identical in both versions.

No Framework

The popup UI is 200 lines of vanilla JavaScript. React would add 100KB+ of dependencies for a list with a search box. The whole extension is under 50KB.

async function saveSession(name) {
  const tabs = await browser.tabs.query({ currentWindow: true });
  const session = {
    id: Date.now().toString(),
    name: name || `Session ${new Date().toLocaleDateString()}`,
    tabs: tabs.map(t => ({ url: t.url, title: t.title, favIconUrl: t.favIconUrl })),
    created: Date.now()
  };
  const { sessions = [] } = await browser.storage.local.get('sessions');
  sessions.unshift(session);
  await browser.storage.local.set({ sessions });
  return session;
}

Storage

browser.storage.local holds up to 10MB. A typical session with 30 tabs is under 5KB. You'd need 2,000 sessions to hit the limit.

Duplicate Detection

function findDuplicates(tabs) {
  const seen = new Map();
  for (const tab of tabs) {
    const key = tab.url.split('#')[0];
    if (seen.has(key)) {
      seen.get(key).push(tab.id);
    } else {
      seen.set(key, [tab.id]);
    }
  }
  return seen;
}

What I'd Add Next

Sync across devices via browser.storage.sync (5MB limit)
Export/import sessions as JSON
Group by domain for large research sessions

The Extension

Free, no account, no data collection: Tab Manager & Session Saver

I also built 9 other free Firefox extensions: see the full list here.

DEV Community