How to Build a Powerful Chrome Tab Manager Extension with FunTester

Function Overview

To make Chrome more convenient, I created a plugin that solves daily tab‑management pain points. The FunTester sidebar core features include tab management, theme switching, tab actions, right‑click menu, interaction optimizations and message listening. It displays all tabs of the current window, supports grouping and sorting by domain, and offers dark/light theme toggles.

Because of undisclosed reasons the source cannot be open‑sourced; interested users can contact me for details and a future video demo.

The plugin also allows various tab operations such as refreshing, creating new tabs, and checking/opening a specific URL. A custom right‑click menu adds flexibility with options like copy URL, copy‑and‑open in new tab, and close tab. Dynamic loading of tab icons and real‑time status updates (e.g., mute state) improve interaction. Message listening enables real‑time communication with the user.

Design and Implementation Details

Tab Management

Tab List Display

Tab lists are generated with ul elements, each tab represented by an li where title, URL and icon are inserted via DOM operations for live updates.

const list = document.getElementById('tabs-list');
// ... createTab function ...

Domain Grouping and Sorting

Tabs are grouped by domain using Array.prototype.reduce and sorted alphabetically to present a clear order.

function sortTabs(tabs) {
  const tabsByDomain = tabs.reduce((acc, tab) => {
    const domain = new URL(tab.url).hostname;
    if (!acc[domain]) { acc[domain] = []; }
    acc[domain].push(tab);
    return acc;
  }, {});
  return Object.keys(tabsByDomain)
    .sort()
    .map(domain => tabsByDomain[domain]);
}

Theme Switching

Implementation

Dark and light theme colors are defined (e.g., colorWhite, colorBlack) and toggled via an isDarkTheme flag that updates page styles on button click.

const toggleThemeButton = document.getElementById('toggleTheme');
let isDarkTheme = false;
function getItemColor() { return isDarkTheme ? '#ffffff' : '#000000'; }
function getItemBackgroundColor() { return isDarkTheme ? '#333333' : '#ffffff'; }
toggleThemeButton.addEventListener('click', () => {
  isDarkTheme = !isDarkTheme;
  document.body.style.backgroundColor = getItemBackgroundColor();
});

Tab Operations

Refresh Tabs

Using chrome.tabs.reload, the extension can refresh the current tab or all tabs in the window.

document.getElementById('reloadTabs').addEventListener('click', function () {
  chrome.tabs.query({currentWindow: true}, function (tabs) {
    tabs.forEach(tab => chrome.tabs.reload(tab.id));
  });
});

Create New Tab

Calls chrome.tabs.create to open a blank tab or a specified URL.

document.getElementById('createNewTab').addEventListener('click', function () {
  chrome.tabs.create({url: 'about:blank'});
});

Check and Open Specified URL

Uses chrome.tabs.query to detect existing tabs with the target URL; if found, activates it with chrome.tabs.update, otherwise creates a new tab.

function checkAndOpen(url) {
  chrome.tabs.query({currentWindow: true}, function (tabs) {
    const existingTab = tabs.find(tab => tab.url === url);
    if (existingTab) {
      chrome.tabs.update(existingTab.id, {active: true});
    } else {
      chrome.tabs.create({url});
    }
  });
}

Right‑Click Menu

Custom Menu

The extension builds a custom context menu with items such as “Copy URL”, “Copy and Open in New Tab”, and “Close Tab”.

function createContextMenu() {
  const menu = document.createElement('div');
  menu.id = 'custom-context-menu';
  const ul = document.createElement('ul');
  const copyUrlItem = document.createElement('li');
  copyUrlItem.textContent = '复制 URL';
  copyUrlItem.addEventListener('click', () => {
    navigator.clipboard.writeText(currentCopyUrl);
  });
  ul.appendChild(copyUrlItem);
  menu.appendChild(ul);
  document.body.appendChild(menu);
}

Interaction Optimizations

Tab Icons

Dynamic img elements load each tab’s favicon, falling back to a default icon when unavailable.

function createIcon(tab) {
  const icon = document.createElement('img');
  icon.src = tab.favIconUrl || 'default-icon.png';
  icon.style.width = '20px';
  icon.style.height = '20px';
  return icon;
}

Tab Status Updates

Listening to chrome.tabs.onUpdated updates UI elements such as mute buttons based on the tab’s mute state.

chrome.tabs.onUpdated.addListener((id, changeInfo, tab) => {
  if (changeInfo.mutedInfo) {
    const muteBtn = document.getElementById(`${id}-mute-btn`);
    muteBtn.style.backgroundColor = tab.mutedInfo.muted ? '#32CD32' : '#1E90FF';
  }
});

Design Highlights

Modular design separates each feature into independent functions, improving readability and maintainability. Dynamic interaction via event listeners and DOM manipulation provides real‑time UI updates, enhancing user experience. Theme switching offers dark and light modes for visual comfort, and the custom right‑click menu streamlines common actions.