Chrome扩展程序：检查内容脚本是否已注入

KF Lin 发表于 Dev

林峰

我正在开发Chrome扩展程序。我没有使用manifest.json匹配所有URL的内容脚本的方式，而是通过chrome.tabs.executeScript在用户单击扩展图标时进行调用来懒惰地注入内容脚本。

我正在尝试避免多次执行脚本。因此，我的内容脚本中包含以下代码：

if (!window.ALREADY_INJECTED_FLAG) {
    window.ALREADY_INJECTED_FLAG = true
    init() // <- All side effects go here
}

问题＃1，这样安全到足以在chrome.tabs.executeScript每次单击扩展程序图标时天真地调用它吗？换句话说，这是幂等的吗？

问题2，是否有类似的方法chrome.tabs.insertCSS？

由于无法访问网页的DOM，因此似乎无法检查backgroud脚本中的内容脚本注入状态。我已经尝试过ping / pong方法来检查任何内容脚本实例是否存在。但这引入了设计ping超时的开销和复杂性。

问题＃3，有没有更好的方法来让后台脚本检查内容脚本的注入状态，因此我可以防止chrome.tabs.executeScript每次用户单击图标时都调用它？

提前致谢！

罗伯·W

这样安全吗，足以确保chrome.tabs.executeScript每次单击扩展程序图标时都能天真地拨打电话？换句话说，这是幂等的吗？

是的，除非您的内容脚本修改了页面的DOM并且重新加载了扩展名（通过在设置页面，更新等方式重新加载了扩展名）。在这种情况下，您的旧内容脚本将不再在扩展程序的上下文中运行，因此它无法使用扩展程序API，也不能直接与您的扩展程序通信。

有类似的方法chrome.tabs.insertCSS吗？

不，没有适用于的包容护卫chrome.tabs.insertCSS。但是，再次插入相同的样式表不会改变页面的外观，因为所有规则都具有相同的CSS专用性，在这种情况下，最后一个样式表具有优先权。但是，如果样式表与您的扩展紧密结合，那么您可以简单地使用executeScript注入脚本，检查它是否是第一次注入，如果是，则插入样式表（请参见下面的示例）。

还有什么更好的方法可以让后台脚本检查内容脚本的注入状态，因此我可以防止chrome.tabs.executeScript每次用户单击图标时都调用它？

您可以向选项卡（chrome.tabs.sendMessage）发送一条消息，如果未得到答复，则假定选项卡中没有内容脚本，然后插入内容脚本。

2的代码示例

在弹出/后台脚本中：

chrome.tabs.executeScript(tabId, {
    file: 'contentscript.js',
}, function(results) {
    if (chrome.runtime.lastError || !results || !results.length) {
        return;  // Permission error, tab closed, etc.
    }
    if (results[0] !== true) {
        // Not already inserted before, do your thing, e.g. add your CSS:
        chrome.tabs.insertCSS(tabId, { file: 'yourstylesheet.css' });
    }
});

contentscript.js：

// Wrapping in a function to not leak/modify variables if the script
// was already inserted before.
(function() {
    if (window.hasRun === true)
        return true;  // Will ultimately be passed back to executeScript
    window.hasRun = true;
    // rest of code ... 
    // No return value here, so the return value is "undefined" (without quotes).
})(); // <-- Invoke function. The return value is passed back to executeScript

请注意，window.hasRun显式检查值很重要（true在上面的示例中），否则它可以是具有id="hasRun"属性的DOM元素的自动创建的全局变量，请参见是否存在将元素ID设置为全局变量的规范？