Chrome 扩展 - 内容脚本从 AJAX 链接/导航多次堆积

Question

我非常接近让我的 Chrome 扩展程序完美运行，但现在遇到了最后一个问题。

该问题似乎与 Facebook 等网站上重复注入的内容脚本有关，点击链接时整个页面不会重新加载等......

我认为该问题与该网站非常依赖 AJAX 有关。

如果我刷新整个页面，或者第一次加载它，那么就没有问题。我的扩展运行并且内容脚本被正确注入。

但是，如果我第一次加载页面，然后单击网站上的链接，Facebook 的“内容部分”将加载您单击的任何链接，而顶部的浮动蓝色导航栏不会刷新或更改根本不。

IE 整个页面不会重新加载。由于网站的“内容部分”和导航栏都在同一框架中，因此您单击的每个链接都会再次注入内容脚本。

所以最终我在控制台日志中看到它正在运行 2X、3X、4X、5X 等。当我点击更多链接时，数字每次都会增加 1。

所以我的问题是这样的：

有没有一种简单的方法可以在再次注入之前检查内容脚本是否已经存在/活动？或者还有什么可以作为解决这种情况的方法？

Answer 1

我在为扩展程序编写内容脚本时预测到了类似的问题，因此我向每个页面的 元素添加了一个独特的属性，其中包含扩展程序名称和版本。

内容脚本所做的第一件事是检查该属性是否已编写脚本，如果已编写则停止。否则，它将添加此属性（值为 true）并继续其用途。

如果您想查看我的解决方案；

该技术稍微复杂的方面是使用 消息传递 获取版本并解析清单（在 AJAX 请求中检索）到 JSON 对象。

要准确了解我是如何实现这一目标的，请查看 init 和 onRequestHelper 函数 此处；

当然，您可以对版本进行硬编码或完全忽略它。只要属性名称是唯一的。

Answer 2

在父框架中，您可以添加 window.doneInjecting = true; 或类似的内容吗？ （或者可能向页面添加一个隐藏元素 - 我不确定子框架是否可以访问其父框架的 JavaScript 变量）

但基本上设置一个简单的标志，以便每次注入内容脚本时，检查该标志是否存在并且仅如果没有继续？

Answer 3

每次选项卡状态更改时 onUpdated 都会触发。只需在 changeInfo.status == "complete"

background.js加载您的内容脚本

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.tabs.getSelected(null, function(tab) {
    // Do some stuff
    if (changeInfo.status == "complete")
    {
        // load your scripts here
        chrome.tabs.executeScript(tabId, {file: "jquery.js"});
        chrome.tabs.executeScript(tabId, {file: "jquery.highlight.js"});
    }
});
});