Chrome扩展：点击弹窗时如何检测安装前打开的旧标签页？

核心思路 #

Content Script加载后，给页面注入一个唯一标记（比如全局变量或隐藏DOM元素）；点击扩展弹窗时，通过脚本注入的方式检查当前页面是否存在这个标记——不存在则说明是未加载Content Script的旧标签页，进而提示用户刷新。

实现步骤 #

1. 在Content Script中注入标记

在你的content.js中添加一行代码，注入唯一标记，避免和页面自身代码冲突：

// 方式1：注入全局变量
window.__MY_EXTENSION_UNIQUE_MARKER__ = true;

// 方式2：注入隐藏DOM元素（适用于禁止修改window对象的页面）
document.body.insertAdjacentHTML('beforeend', '<div id="my-extension-unique-marker" style="display: none;"></div>');

2. 在弹窗中检测标记

根据你使用的Manifest版本，选择对应的代码实现：

Manifest V3 版本

确保manifest.json中声明scripting和activeTab权限：

{
  "permissions": ["scripting", "activeTab"],
  // 其他配置...
}

弹窗的popup.js代码：

document.addEventListener('DOMContentLoaded', async () => {
  // 获取当前激活的标签页
  const [currentTab] = await chrome.tabs.query({ active: true, currentWindow: true });

  // 过滤不支持脚本注入的页面（如chrome://、chrome-extension://）
  if (!currentTab.url.startsWith('http')) {
    console.log('当前页面不支持扩展功能');
    return;
  }

  try {
    // 执行检测脚本
    const detectionResult = await chrome.scripting.executeScript({
      target: { tabId: currentTab.id },
      func: () => {
        // 检查标记是否存在（二选一即可）
        return window.__MY_EXTENSION_UNIQUE_MARKER__ 
          || document.getElementById('my-extension-unique-marker') !== null;
      }
    });

    const isContentScriptLoaded = detectionResult[0].result;
    if (!isContentScriptLoaded) {
      // 提示用户刷新
      if (confirm('当前页面未加载扩展功能，请刷新页面以启用？')) {
        chrome.tabs.reload(currentTab.id);
      }
    } else {
      // 扩展已正常加载，执行后续逻辑
      console.log('扩展功能已生效');
    }
  } catch (error) {
    console.error('检测失败：', error);
  }
});

Manifest V2 版本

确保manifest.json中声明activeTab权限：

{
  "permissions": ["activeTab"],
  // 其他配置...
}

弹窗的popup.js代码：

document.addEventListener('DOMContentLoaded', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const currentTab = tabs[0];

    // 过滤不支持脚本注入的页面
    if (!currentTab.url.startsWith('http')) {
      console.log('当前页面不支持扩展功能');
      return;
    }

    chrome.tabs.executeScript(currentTab.id, {
      code: 'window.__MY_EXTENSION_UNIQUE_MARKER__ || document.getElementById("my-extension-unique-marker") !== null;'
    }, (results) => {
      if (chrome.runtime.lastError) {
        console.error('检测失败：', chrome.runtime.lastError);
        return;
      }

      const isContentScriptLoaded = results[0];
      if (!isContentScriptLoaded) {
        if (confirm('当前页面未加载扩展功能，请刷新页面以启用？')) {
          chrome.tabs.reload(currentTab.id);
        }
      } else {
        console.log('扩展功能已生效');
      }
    });
  });
});

注意事项 #

• 标记命名要唯一，建议使用扩展的ID作为前缀，避免和页面自身代码冲突；
• 对于chrome://、file://等特殊协议页面，无法注入脚本，需要提前过滤并给出提示；
• 如果你的Content Script仅匹配特定URL，可以在检测前先判断当前标签页URL是否符合匹配规则，避免不必要的检测。

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