收聽元素的創建，並在Chrome擴展程序中顯示在頁面上時觸發事件

Question

是否可以讓Chrome擴展程序偵聽尚未創建的元素的外觀？

假設用戶單擊一個按鈕，click事件會創建一個元素<div id='myDiv'>My Div</div>並將其添加到頁面/ DOM中。 是否可以設置一個偵聽器，該偵聽器會在該元素出現時自動觸發事件？

或者我是否必須使用輪詢頁面並每隔X毫秒檢查一次這個元素？

對我來說，jQuery和其他庫不是一個選擇順便說一句。

Answer 1

新的DOM4 MutationObserver可以做到這一點。 我不認為它得到了廣泛的支持，但幸運的是，它在Chrome中得到了支持，就像WebKitMutationObserver 。

從鏈接的教程頁面修改，它會在頁面上的任何位置偵聽突變：

var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
            if(mutation.addedNodes[i].id == "myDiv") {
                // target node added, respond now...
            }
        }
    });
});
observer.observe(document, { subtree: true });

如果你可以在observer.observe縮小你的聽力。 observer.observe一個比document更具體的元素，這會給你一些性能提升。

Answer 2

你可以使用arri.js ，它包含了Mutation Observers api。 用法：

document.arrive(".test-elem", function() {
    // 'this' refers to the newly created element
    var newElem = this;
});