ReactJS Chrome扩展：如何仅在活动标签页运行内容脚本？

标签页API（Tabs API）可由服务工作者和扩展页面使用，但不能由内容脚本使用。

核心思路 #

内容脚本无法直接判断当前标签是否活跃，得依托扩展的**后台服务工作者（Service Worker）**来管控——要么只给活跃标签动态注入内容脚本，要么让内容脚本通过消息通信确认标签状态后再执行操作，从根源避免非活动标签触发逻辑。

具体实现方案 #

方案1：动态注入内容脚本到活跃标签 #

不在manifest.json里静态声明内容脚本，完全由服务工作者控制注入时机，只给切换为活跃状态的标签加载脚本和样式。

1. 修改manifest.json配置
   移除静态content_scripts项，添加服务工作者及必要权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "service-worker.js"
  },
  "permissions": ["tabs", "activeTab"]
}

2. 编写服务工作者逻辑（service-worker.js）
   监听标签激活事件，动态注入/清理内容脚本：

// 监听标签切换为活跃状态的事件
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  // 清理非活跃标签的脚本残留（可选）
  const allTabs = await chrome.tabs.query({});
  for (const tab of allTabs) {
    if (tab.id !== activeInfo.tabId) {
      try {
        // 移除样式
        await chrome.scripting.removeCSS({ target: { tabId: tab.id }, files: ["content.css"] });
        // 清理DOM和事件监听
        await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: () => {
          const sidebar = document.getElementById("extension-sidebar");
          if (sidebar) sidebar.remove();
        }});
      } catch (e) {
        // 忽略无权限的特殊页面（如chrome://）
      }
    }
  }

  // 给当前活跃标签注入脚本和样式
  try {
    await chrome.scripting.executeScript({
      target: { tabId: activeInfo.tabId },
      files: ["content-script.js"]
    });
    await chrome.scripting.insertCSS({
      target: { tabId: activeInfo.tabId },
      files: ["content.css"]
    });
  } catch (e) {
    // 处理注入失败的情况
  }
});

// 扩展安装/更新时，给当前活跃标签初始化注入
chrome.runtime.onInstalled.addListener(async () => {
  const activeTab = await chrome.tabs.query({ active: true, currentWindow: true });
  if (activeTab[0]) {
    await chrome.scripting.executeScript({
      target: { tabId: activeTab[0].id },
      files: ["content-script.js"]
    });
    await chrome.scripting.insertCSS({
      target: { tabId: activeTab[0].id },
      files: ["content.css"]
    });
  }
});

3. 编写内容脚本（content-script.js）
   直接编写React侧边栏的挂载逻辑即可，因为只有活跃标签才会加载它：

function initSidebar() {
  const sidebar = document.createElement("div");
  sidebar.id = "extension-sidebar";
  document.body.appendChild(sidebar);
  // 挂载你的React组件
  // ReactDOM.render(<YourNoteSidebar />, sidebar);
}

initSidebar();

方案2：通过消息通信控制内容脚本行为 #

如果必须静态注入内容脚本（比如需要监听页面全局事件），可以让内容脚本每次执行关键操作前，先向服务工作者确认当前标签是否活跃。

1. 内容脚本逻辑（content-script.js）
   封装状态查询函数，执行操作前先验证：

// 查询当前标签是否为活跃标签
async function isCurrentTabActive() {
  return new Promise((resolve) => {
    chrome.runtime.sendMessage({ type: "CHECK_ACTIVE_STATUS" }, (response) => {
      resolve(response.isActive);
    });
  });
}

// 示例：保存笔记前先验证状态
async function saveNote() {
  const isActive = await isCurrentTabActive();
  if (!isActive) return; // 非活跃标签直接终止操作
  // 你的笔记保存逻辑
}

2. 服务工作者逻辑（service-worker.js）
   监听消息请求，返回标签活跃状态：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "CHECK_ACTIVE_STATUS") {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const activeTabId = tabs[0]?.id;
      sendResponse({ isActive: sender.tab.id === activeTabId });
    });
    return true; // 异步响应需返回true
  }
});

注意事项 #

• 对于chrome://、edge://等浏览器内置页面，扩展没有注入权限，要做好异常捕获。
• 用React开发侧边栏时，需确保编译后的资源能被内容脚本正确加载，可通过chrome.runtime.getURL获取资源路径。

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