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

＆＃34;目标＆＃34;不是您要过滤的元素的选择器，但它应该是一个单独的元素，代表您正在观看的子树的根。

例如，如果您希望收到正文中所有新元素的通知，则目标应为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来监视文档中的深层突变。

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

1 个答案: