如何设置 MutationObserver 来检测添加的 DOM？

Question

问题：我想将 Facebook 的一些默认文本更改为我自己的。

我使用了jQuery的text()，但是问题是当用户向下滚动时Facebook会添加更多的DOM，所以我尝试使用MutationObserver来检测是否有新的DOM进来。

我在我的 chrome content_script 中试过这个：

// I need to detect new .UFILikeLink elements
var target = document.querySelector('.UFILikeLink');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
    alert('test');
  });    
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe(target, config);

但这不起作用，alert() 没有触发。我想知道这是使用MutationObserver 的正确方法。

Answer 1

“目标”不是您要过滤的元素的选择器，但它应该是代表您正在查看的子树的根的单个元素。

例如，如果您想在正文中收到所有新元素的通知，则目标应该是document.body。

如果你需要过滤结果（你可能会这样做），你应该在回调中这样做。

（已删除的代码）

由于您已经在使用 jQuery，这里有一个更简洁和健壮的版本：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    $(mutation.addedNodes).find(".UFILikeLink").each(function() {
      /* do something */
      console.dir(this); // Note, it's a DOM element, use $(this) if needed        
    });
  });    
});

observer.observe(document.body, { childList: true,  subtree: true });

请注意，您需要 subtree: true 来监视文档深处的突变。