Chrome擴展程序：如何修改從網頁中的Ajax請求創建的元素？

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演示