Question

我有一个扩展，在更新选项卡时注入内容脚本。主要脚本：

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不能被重新声明。

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

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

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

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

Answer 1

导航会擦除内容脚本，但许多内容都可以触发onUpdated。

第一个想到的是加载iframe。主页面不会导航，但你会不加思索地注入。

许多方法都是可能的：

在执行任何操作之前检查Content是否已定义，使内容脚本更加健壮。
收听其他事件，例如各种webNavigation API事件。他们将唯一地识别他们所指的框架。
不要听事件 - 总是注入，并改变你的触发逻辑（例如，在chrome.storage中保留一个标志）。

使用Chrome扩展程序动态重新加载页面会重新注入内容脚本

1 个答案: