javascript - 使用 Chrome 扩展动态重新加载页面重新注入(inject)内容脚本

Question

我有一个扩展，可以在选项卡更新时注入(inject)内容脚本。 主要脚本:

chrome.browserAction.onClicked.addListener(function(tab) {
    "use strict";
    const sendScriptToPage = function(tabId, changeInfo, tab) {
        if (changeInfo.status === "complete" && tab && tab.url && tab.url.indexOf("http") === 0) {
            console.log ("executeScript ");
            chrome.tabs.executeScript(tabId, {
                file: "content.js", allFrames: true
            });
        }
    };
    chrome.tabs.onUpdated.addListener(sendScriptToPage);
});

内容脚本:

const Content = (function() {
    "use strict";
    console.log("Content");
    const makeRandomColor = function(){
        let c = '';
        while (c.length < 6) {
            c += (Math.random()).toString(16).substr(-6).substr(-1)
        }
        return '#'+c;
    };
    document.body.style.backgroundColor = makeRandomColor();
}
)();

当我重新加载选项卡时它工作正常。但是，当动态重新加载选项卡时，内容脚本会重新加载，尽管它已经加载到选项卡中。这会显示在日志中，因为无法重新声明 const。

更新时不应该卸载内容脚本吗？我如何知道内容脚本是否已加载？

显示此行为的 URL: http://www.prisjakt.nu/produkt.php?p=391945#rparams=ss=android

在搜索字段中键入内容会触发 onUpdated 事件处理程序，但内容脚本已在页面中。

测试扩展: https://github.com/hawk-lord/chrome-test

Answer 1

导航会删除内容脚本，但 onUpdated 可以由很多事情触发。

首先想到的是正在加载的 iframe。主页无法导航，但您确实可以随意注入(inject)。

许多方法都是可能的:

1. 在执行任何操作之前检查是否定义了 Content，使内容脚本更加健壮。
2. 监听不同的事件，例如，各种 webNavigation API 事件。他们将唯一地标识他们所引用的框架。
3. 不要监听事件 - 始终注入(inject)并更改触发逻辑(例如，在 chrome.storage 中保留一个标志)。