Build a Chrome Extension Tab Manager — View and Close All Open Tabs

The Problem This Extension Solves

Anyone who works in a browser knows the struggle — you open 30 tabs, lose the one you need, and spend 2 minutes clicking through them. A Tab Manager extension fixes this permanently.

What We Will Build

A Tab Manager popup that shows all your open browser tabs with:

• ✓A real-time search box to filter by title or URL
• ✓One-click tab switching — click any tab to jump to it
• ✓A close button on each tab to close it without switching

The chrome.tabs API

The chrome.tabs API is what makes this possible. It lets your extension read, manipulate, and monitor browser tabs.

// Get all open tabs
chrome.tabs.query({}, function(tabs) {
  console.log(tabs); // Array of all open tabs
});

// Switch to a tab
chrome.tabs.update(tabId, { active: true });

// Close a tab
chrome.tabs.remove(tabId);

Rendering Tabs Dynamically

The key technique is generating the tab list with JavaScript using innerHTML:

function renderTabs(tabs) {
  const list = document.getElementById('tab-list');
  list.innerHTML = tabs.map(tab => `
    <div class="tab-item" data-id="${tab.id}">
      <img src="${tab.favIconUrl}" class="favicon" />
      <span class="tab-title">${tab.title}</span>
      <button class="close-btn" data-id="${tab.id}">×</button>
    </div>
  `).join('');
}

Real-Time Search

The search filter updates the list as you type — no reload needed:

document.getElementById('search').addEventListener('input', (e) => {
  const query = e.target.value.toLowerCase();
  const filtered = allTabs.filter(tab =>
    tab.title.toLowerCase().includes(query) ||
    tab.url.toLowerCase().includes(query)
  );
  renderTabs(filtered);
});

Event Delegation

Instead of adding a click listener to every tab, we use event delegation — one listener on the parent that handles clicks on all children:

document.getElementById('tab-list').addEventListener('click', (e) => {
  const closeBtn = e.target.closest('.close-btn');
  const tabItem  = e.target.closest('.tab-item');

  if (closeBtn) {
    chrome.tabs.remove(parseInt(closeBtn.dataset.id));
  } else if (tabItem) {
    chrome.tabs.update(parseInt(tabItem.dataset.id), { active: true });
  }
});

This is a preview. The full ebook covers the complete extension with styling, favicon fallbacks, tab count display, and keyboard navigation support.

Why Event Delegation Matters

Event delegation is a core JavaScript pattern that every developer should know. It is more efficient than adding individual listeners and works even for elements added dynamically — which is exactly what we are doing when we re-render the tab list.