如何限制Chrome扩展内容脚本仅在指定标签页运行

核心思路 #

通过会话存储标记录制标签页ID + 内容脚本前置校验的组合，实现仅在用户指定的标签页（包括其导航的所有URL）运行录制逻辑，其他标签页自动跳过。

步骤1：配置Manifest权限 #

确保manifest.json中声明所需权限：

{
  "manifest_version": 3,
  "name": "交互录制工具",
  "version": "1.0",
  "permissions": ["scripting", "storage", "tabs"],
  "action": {},
  "background": {
    "service_worker": "background.js"
  }
}

步骤2：背景脚本（background.js）处理录制启停 #

负责记录目标标签页ID、注册内容脚本、监听标签页关闭事件：

// 点击扩展图标触发录制启停
chrome.action.onClicked.addListener(async (tab) => {
  const { recordingTabId } = await chrome.storage.session.get('recordingTabId');
  
  // 已在录制，停止并清理
  if (recordingTabId === tab.id) {
    await chrome.storage.session.remove('recordingTabId');
    chrome.tabs.sendMessage(tab.id, { action: 'stopRecording' });
    return;
  }

  // 启动录制，存储目标标签页ID
  await chrome.storage.session.set({ recordingTabId: tab.id });
  
  // 向目标标签页注册内容脚本，匹配所有URL
  await chrome.scripting.registerContentScripts([{
    id: 'recorder-script',
    matches: ['<all_urls>'],
    js: ['content-script.js'],
    runAt: 'document_start',
    target: { tabId: tab.id }
  }]);
});

// 监听标签页关闭，自动清理录制状态
chrome.tabs.onRemoved.addListener(async (tabId) => {
  const { recordingTabId } = await chrome.storage.session.get('recordingTabId');
  if (recordingTabId === tabId) {
    await chrome.storage.session.remove('recordingTabId');
  }
});

步骤3：内容脚本（content-script.js）校验并执行录制逻辑 #

每次页面加载时先校验当前标签页是否为录制目标，再启动录制：

(async function initRecorder() {
  // 获取当前标签页ID
  const currentTab = await chrome.tabs.getCurrent();
  const { recordingTabId } = await chrome.storage.session.get('recordingTabId');

  // 非目标标签页，直接退出
  if (!currentTab || currentTab.id !== recordingTabId) return;

  // 录制逻辑：监听用户交互
  function trackInteraction(e) {
    const eventData = {
      type: e.type,
      target: e.target.tagName,
      url: window.location.href,
      timestamp: Date.now()
    };
    // 发送录制数据到背景脚本存储/处理
    chrome.runtime.sendMessage({ action: 'recordEvent', data: eventData });
  }

  // 注册事件监听
  document.addEventListener('click', trackInteraction);
  document.addEventListener('keydown', trackInteraction);

  // 监听停止录制指令，清理资源
  chrome.runtime.onMessage.addListener((msg) => {
    if (msg.action === 'stopRecording') {
      document.removeEventListener('click', trackInteraction);
      document.removeEventListener('keydown', trackInteraction);
    }
  });
})();

关键细节说明 #

1. 会话存储的优势：chrome.storage.session仅在当前浏览器会话有效，关闭浏览器后自动清空，避免残留录制状态。
2. 标签页导航自动续录：通过registerContentScripts的matches: <all_urls>和target: {tabId: ...}配置，目标标签页导航到任何URL时，Chrome都会自动注入脚本，脚本启动时再校验标签页ID，确保续录。
3. 资源清理：停止录制或标签页关闭时，及时移除事件监听、清理存储状态，避免内存泄漏。

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