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

我正在尝试避免多次执行脚本。所以我的内容脚本中有以下代码:

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

问题 #1，每次点击扩展图标时，这是否足够安全以天真地调用 chrome.tabs.executeScript？换句话说，这是幂等的吗？

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

似乎无法在背景脚本中检查内容脚本注入(inject)状态，因为它无法访问网页的 DOM。我尝试了一种 ping/pong 方法来检查任何内容脚本实例是否存在。但这引入了设计 ping 超时的开销和复杂性。

问题 #3，后台脚本检查内容脚本注入(inject)状态的任何更好的方法，这样我就可以防止每次调用 chrome.tabs.executeScript用户点击了图标？

提前致谢!

最佳答案

is this safe enough to naively call chrome.tabs.executeScript every time the extension icon got clicked? In other words, is this idempotent?

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

is there a similar method for chrome.tabs.insertCSS?

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

any better method for background script to check the inject status of content script, so I can just prevent calling chrome.tabs.executeScript every time when user clicked the icon?

1. 您可以向选项卡 (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 您有两个解决方案:

1. 直接使用 Windows:不推荐，因为每个人都可以更改变量和 Is there a spec that the id of elements should be made global variable?
2. 使用 chrome.storage API:您可以与其他窗口共享 contentScript 的状态(您可以看到缺点，这根本不是缺点，是您需要请求对 Manifest.json 的权限。但这没关系，因为这是正确的方法。

选项 1: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 元素，参见 Is there a spec that the id of elements should be made global variable?

选项 2:contentscript.js(使用 chrome.storage.sync，您也可以使用 chrome.storage.local)

    // Wrapping in a function to not leak/modify variables if the script
    // was already inserted before.
    (chrome.storage.sync.get(['hasRun'], (hasRun)=>{
      const updatedHasRun = checkHasRun(hasRun); // returns boolean
      chrome.storage.sync.set({'hasRun': updatedHasRun});
    ))()

function checkHasRun(hasRun) {
        if (hasRun === true)
            return true;  // Will ultimately be passed back to executeScript
        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

关于javascript - Chrome 扩展 : Checking if content script has been injected or not，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34528785/