Question

我正在尝试为此页面http://jisho.org/kanji/radicals/制作Chrome扩展程序，但我遇到了问题。

扩展程序应该修改#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

Chrome扩展程序：如何修改从网页中的Ajax请求创建的元素？

1 个答案: