Ajax 加载后重新初始化内容脚本？

Question

在我的内容脚本中，我将遍历整个 DOM 并对所有 <img> 元素做一些事情。

我在 Background.js 中使用 onUpdated 来检查选项卡何时打开，然后执行脚本。

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) { 
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            if(info.status == "complete") {
                chrome.tabs.sendMessage(tabs[0].id, function (response) {
                   // send data to content script etc.
                });
            }
        });
}

这适用于非动态加载的内容 - 例如，在 Facebook 新闻提要上，它会对所有最初可见的图像执行我想要的操作 - 但当我向下滚动时，新 stories/photos 等被加载（使用 AJAX？不确定）当然这些 <img> 元素不受我的内容脚本的影响。

我如何重新加载（或者调整会更好，因为我必须搜索整个 DOM，而且它很慢）我的内容脚本，以便它适用于这个新调整的 DOM？我在这里找不到任何制表符方法 - https://developer.chrome.com/extensions/tabs 提到了这个问题。

尝试过：

在 manifest 中添加 all_frames : true 没有任何作用。
删除 info.status 条件也没有任何作用。

Answer 1

您需要监控页面以插入新图像，例如使用 MutationObserver 或 mutation-summary 库。 tabs 事件不会在页面更改时触发。

有关执行此操作的方法的讨论，请参阅 this question。

Ajax 加载后重新初始化内容脚本？

Reinitialising content script after Ajax load?

javascript

ajax

google-chrome-extension

dynamically-generated