javascript - 监听元素的创建并在它出现在 Chrome 扩展的页面上时触发事件

Question

是否可以让 Chrome 扩展程序监听尚未创建的元素的外观？

假设用户单击一个按钮并且单击事件创建一个元素<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到比 更具体的元素document，那将为您带来一些性能提升。

Answer 2

您可以使用到达.js，它包装了Mutation Observers api。用法：

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