收听元素的创建，并在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;
});