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

Question

在我的内容脚本中，我将遍历整个 DOM 并对所有 <img> 执行一些操作例如元素。

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

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 新闻提要上，它会对最初可见的所有图像执行我想要的操作 - 但当我向下滚动时，新的故事/照片等已加载(使用 AJAX？不确定)，当然还有这些 <img>元素不受我的内容脚本的影响。

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

尝试过:

• 添加all_frames : true在 manifest什么都不做。
• 删除 info.status 条件也不会执行任何操作。

Answer 1

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

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