如何禁止开发的Chrome Extension V3在重复标签页运行多实例？

无法通过manifest配置实现该需求，必须通过编码控制Popup的显示状态，核心思路是借助后台Service Worker维护全局活跃标签页的状态，同步所有标签页的Popup权限。

实现思路与代码示例 #

1. 全局状态管理：用Storage持久化活跃标签页ID #

由于Service Worker可能自动休眠，使用chrome.storage.local存储当前允许激活Popup的标签页ID，确保状态不会因Service Worker重启丢失。

2. 后台Service Worker逻辑 #

在service-worker.js中监听消息、标签页关闭和URL变化事件，维护活跃状态：

// 处理来自Popup的消息查询与设置请求
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  switch (message.type) {
    case 'GET_ACTIVE_TAB':
      const stored = await chrome.storage.local.get('activeTabId');
      sendResponse({ activeTabId: stored.activeTabId });
      break;
    case 'SET_ACTIVE_TAB':
      await chrome.storage.local.set({ activeTabId: message.tabId });
      sendResponse({ success: true });
      break;
  }
});

// 监听标签页关闭，释放活跃状态
chrome.tabs.onRemoved.addListener(async (tabId) => {
  const { activeTabId } = await chrome.storage.local.get('activeTabId');
  if (tabId === activeTabId) {
    await chrome.storage.local.remove('activeTabId');
  }
});

// 监听标签页URL变化，若活跃标签页离开目标地址则释放状态
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo) => {
  const { activeTabId } = await chrome.storage.local.get('activeTabId');
  if (tabId === activeTabId && changeInfo.url && !changeInfo.url.includes('www.abc.com/xyz')) {
    await chrome.storage.local.remove('activeTabId');
  }
});

3. Popup页面逻辑控制 #

在popup.js中，页面加载时查询全局状态，根据结果决定显示正常内容还是提示信息：

document.addEventListener('DOMContentLoaded', async () => {
  const currentTab = await chrome.tabs.getCurrent();
  const response = await chrome.runtime.sendMessage({ type: 'GET_ACTIVE_TAB' });
  
  const contentEl = document.getElementById('main-content');
  const warningEl = document.getElementById('duplicate-warning');

  if (!response.activeTabId) {
    // 无活跃标签页，设置当前页为活跃状态并显示功能按钮
    await chrome.runtime.sendMessage({ type: 'SET_ACTIVE_TAB', tabId: currentTab.id });
    contentEl.style.display = 'block';
    warningEl.style.display = 'none';
  } else if (response.activeTabId === currentTab.id) {
    // 当前页就是活跃页，正常显示内容
    contentEl.style.display = 'block';
    warningEl.style.display = 'none';
  } else {
    // 存在其他活跃页，隐藏功能内容并提示
    contentEl.style.display = 'none';
    warningEl.style.display = 'block';
  }
});

4. Popup页面结构配合 #

在popup.html中添加对应的内容容器和提示元素：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 200px; padding: 16px; }
    #duplicate-warning { color: #dc3545; }
  </style>
</head>
<body>
  <div id="main-content" style="display: none;">
    <button id="start-btn">启动核心功能</button>
    <!-- 其他功能元素 -->
  </div>
  <div id="duplicate-warning" style="display: none;">
    已有标签页在运行，请切换到原标签页操作
  </div>
  <script src="popup.js"></script>
</body>
</html>

关键注意事项 #

• 确保manifest.json中已声明必要权限：

  "permissions": ["storage", "tabs"]
  

• chrome.tabs.getCurrent()仅能在Popup或内容脚本中使用，无需额外权限，但需确保Popup在目标标签页上被触发。

内容的提问来源于stack exchange，提问作者user14303769