Javascript 侦听元素的创建，并在它出现在Chrome Extension的页面上时触发事件

是否有可能让Chrome扩展侦听尚未创建的元素的外观

假设用户单击一个按钮，单击事件创建一个元素

mydiv

，并将其添加到页面/DOM中。是否可以设置一个侦听器，在该元素出现时自动触发事件

或者我必须每隔X毫秒轮询页面并检查这个元素吗

顺便说一句，jQuery和其他库不是我的选择。

新的库可以做到这一点。我认为它还没有得到广泛的支持，但幸运的是，它在Chrome中得到了支持，如

webkit-mutationobserver

从链接的教程页面修改后，此选项将侦听页面上任何地方的突变：

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 });

var-observer=new-webkit-mutationobserver（函数（突变）{
突变。forEach（功能（突变）{
对于（var i=0；i

如果您可以在

观察者中缩小收听范围。观察

到比

文档

更具体的元素，这将给您带来一些性能提升。

您可以使用，它包装了api。用法：

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

---

为什么不跟踪按钮的点击？或者它会通过其他方式加载？它实际上是通过AJAX回调创建的，但为了示例起见，我只是用最简单的方式来表达它。因此，我必须倾听元素的创建/外观。重复。。。在任何情况下，看起来最优雅的解决方案现在都被弃用了（DOM突变事件），但这里发布了一个黑客解决方案：@Cecchi这不是一个完全重复的解决方案，因为这个问题具体排除了jQuery。是否有遗留实现？@zladuric也许你会感兴趣，谢谢，但我不能使用外部库。setInterval它必须保持不变。@zladuric尽管有问题标题，但该问题的公认答案不使用jQuery。它使用的是简单的旧JS。这是可行的，但当我使用它（在Chrome中，用于监听Gmail中元素的诞生）时，我得到一个错误，即options对象必须至少将“attributes”、“characterData”或“childList”中的一个设置为true。这确实是你需要做的，让它工作。