DEV Community

pmestre-Forge
pmestre-Forge

Posted on

Building a Chrome Extension with Zero Unnecessary Permissions

#javascript #chrome #webdev #tutorial

Every time I install a Chrome extension, I check the permissions. Most tab managers ask for:

  • "Read and change all your data on all websites"
  • "Read your browsing history"
  • "Manage your downloads"

For a tab manager. To save URLs.

When I built Tab Stash, I wanted to prove you could build a genuinely useful extension with minimal permissions. Here's how.

The Permission Problem

Chrome's permission model is coarse-grained. The tabs permission, for example, gives you access to tab URLs and titles — but it also signals to users that you can "read your browsing activity." That's technically true, but it scares people.

Many developers just request everything upfront because it's easier. That's the wrong trade-off.

What Tab Stash Actually Needs

Tab Stash saves your open tabs as Markdown. Here's the minimum set of permissions for that:

{
  "permissions": ["activeTab"],
  "optional_permissions": ["tabs"]
}
Enter fullscreen mode Exit fullscreen mode

That's it. activeTab gives us access to the current tab when the user clicks our icon. The tabs permission is optional — we only request it when the user wants to save ALL open tabs, and Chrome shows a prompt first.

The Architecture

The extension is straightforward:

popup.html (UI)
  ├── popup.js (tab capture + display)
  ├── storage.js (chrome.storage.local wrapper)
  ├── export.js (Markdown formatting)
  └── settings.js (format preferences)
Enter fullscreen mode Exit fullscreen mode

No background scripts running 24/7. No content scripts injected into pages. The extension only activates when you click it.

Saving Tabs

The core function is embarrassingly simple:

async function captureCurrentTabs() {
  const tabs = await chrome.tabs.query({ 
    currentWindow: true 
  });

  return tabs.map(tab => ({
    title: tab.title,
    url: tab.url,
    favIconUrl: tab.favIconUrl,
    savedAt: Date.now()
  }));
}
Enter fullscreen mode Exit fullscreen mode

Exporting as Markdown

The export module handles multiple formats:

function toMarkdownLinks(tabs) {
  return tabs
    .map(t => `- [${t.title}](${t.url})`)
    .join('\n');
}

function toWikiLinks(tabs) {
  return tabs
    .map(t => `- [[${t.title}]]`)
    .join('\n');
}

function toNumberedList(tabs) {
  return tabs
    .map((t, i) => `${i + 1}. [${t.title}](${t.url})`)
    .join('\n');
}
Enter fullscreen mode Exit fullscreen mode

Local Storage Only

Everything persists in chrome.storage.local:

async function saveSession(name, tabs) {
  const session = {
    name,
    tabs,
    createdAt: Date.now(),
    id: crypto.randomUUID()
  };

  const { sessions = [] } = await chrome.storage.local.get('sessions');
  sessions.unshift(session);
  await chrome.storage.local.set({ sessions });

  return session;
}
Enter fullscreen mode Exit fullscreen mode

No server, no database, no sync service. The user's data never leaves their machine.

File Export

For the auto-export feature, we use the downloads permission (requested only when the user enables file export):

async function exportAsFile(session, format) {
  const content = formatSession(session, format);
  const blob = new Blob([content], { type: 'text/markdown' });
  const url = URL.createObjectURL(blob);

  await chrome.downloads.download({
    url,
    filename: `tab-stash/${session.name}.md`,
    saveAs: false
  });

  URL.revokeObjectURL(url);
}
Enter fullscreen mode Exit fullscreen mode

Results

Tab Stash weighs in at ~15KB total. It loads instantly, uses zero memory when not active, and requests only the permissions it needs when it needs them.

The permission-minimal approach actually forced better architecture decisions. When you can't spy on everything, you have to think carefully about what data you actually need.

Tab Stash on Chrome Web Store | Source on GitHub

What's your approach to Chrome extension permissions? I'm curious if others think about this as much as I do.

Top comments (0)