Chrome扩展开发：如何避免content.js脚本重复注入？

嘿，我完全懂你这会儿的困扰——每次关掉再重新打开Chrome扩展的popup，content.js就被重复注入，导致页面上出现重复操作的问题，而且你尝试用window.hasRun标记来避免，结果还出错了对吧？

为什么你的检测代码没起作用？ #

你写的自执行函数是运行在popup的上下文里的，这里的window指的是popup小窗口本身，不是你要注入脚本的目标标签页的页面窗口。所以这个window.hasRun标记根本没加到目标页面里，自然没法阻止重复注入啦。

两种可行的解决方案 #

方案一：在content.js内部加检测逻辑（最推荐）

直接把重复检测的逻辑放到content.js的开头，因为content.js是运行在目标页面的上下文里，这里的window就是目标页面的window，能准确判断是否已经执行过：

// content.js 最顶部添加这段代码
if (window.hasRun) {
  console.log("content.js已经执行过，跳过本次注入");
  return; // 直接退出，不执行后续逻辑
}
window.hasRun = true;

// 下面是你原本的content.js业务逻辑
// ...

这种方法的好处是，不管你从哪个入口（popup、background、快捷键触发等）注入content.js，都能有效阻止重复执行，逻辑最健壮。

方案二：在popup.js注入前先检测目标页面状态

如果你希望在popup层面就判断是否需要注入，可以通过chrome.tabs.executeScript执行一段检测代码，查询目标页面是否已经有hasRun标记：

// popup.js 替换你原来的注入代码
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  const activeTabId = tabs[0].id;

  // 先检测目标页面是否已经运行过content.js
  chrome.tabs.executeScript(activeTabId, {
    code: 'window.hasRun === true' // 这段代码在目标页面上下文执行
  }, function(results) {
    // results[0] 是检测代码的返回值
    if (results[0]) {
      console.log("目标页面已注入过content.js，跳过");
      return;
    }

    // 先注入jQuery，再注入content.js
    chrome.tabs.executeScript(activeTabId, { file: "jquery-3.4.1.min.js" }, function() {
      chrome.tabs.executeScript(activeTabId, { file: "content.js" }, function() {
        console.log("脚本注入完成");
      });
    });
  });
});

这里要注意，chrome.tabs.executeScript的code参数执行的代码是在目标页面的上下文，所以能正确拿到目标页面的window.hasRun值。

额外优化：避免重复注入jQuery #

如果担心jQuery被重复注入（比如目标页面本身已经有jQuery），可以在注入前先检测：

function injectScripts(tabId) {
  // 先检测jQuery是否存在
  chrome.tabs.executeScript(tabId, {
    code: 'typeof jQuery !== "undefined"'
  }, function(jQueryExists) {
    const injectJQuery = !jQueryExists[0];

    // 注入jQuery（如果需要），然后注入content.js
    const injectStep = injectJQuery ? 
      chrome.tabs.executeScript.bind(null, tabId, { file: "jquery-3.4.1.min.js" }) :
      (callback) => callback();

    injectStep(function() {
      // 检测content.js是否已运行
      chrome.tabs.executeScript(tabId, {
        code: 'window.hasRun === true'
      }, function(results) {
        if (!results[0]) {
          chrome.tabs.executeScript(tabId, { file: "content.js" });
          console.log("content.js注入完成");
        }
      });
    });
  });
}

// 调用逻辑
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  injectScripts(tabs[0].id);
});

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