javascript - Chrome 扩展 : How to modify elements created from an Ajax request in a webpage?

Question

我正在尝试为这个页面做一个 chrome 扩展 http://jisho.org/kanji/radicals/我遇到了问题。

扩展应该修改在 #found_kanji div 中找到的包含“kanji”的元素，但是这些元素在页面加载时不存在，而是被创建的用户单击“部首”(汉字的一部分)后，会触发从网站数据库加载汉字的 Ajax 查询。

如何修改这些元素？

根据我的了解，DOM 操作事件现已弃用，因此我无法查看元素的创建时间。我可以尝试使用 webRequests API 将网站 javascript 替换为本地版本，我认为这会很丑陋但它可以工作，但后来我意识到我无法从网页脚本到内容脚本或扩展进行通信本身。有人有想法吗？

Answer 1

您可以使用 MutationObserver 来监听特定 div 中的 DOM 更改，并在新元素添加到 div 时执行您的修改:

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if(mutation.addedNodes.length){
        var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
        addedNodes.forEach(function(node){
            if(node.className == 'something'){
                // do stuff
            }
        });
    }
  });    
});

observer.observe(document.getElementById('found_kanji'), { subtree: true, childList: true, characterData: true });

jsFiddle demo