在页面更改时运行脚本[重复]

Posted 2023-05-07

【中文标题】在页面更改时运行脚本[重复]

【英文标题】：Run script on page change [duplicate]

【发布时间】：2016-02-02 06:57:41

【问题描述】：

我制作了一个简单的 chrome 扩展程序，它在页面加载时运行内容脚本。它改变了 img 标签的 src 属性。每次网站获得新的 img 标签时，如何使其运行？例如，如果您在 facebook 上向下滚动添加了新内容，我想将这些新图像更改为我自己的。也许有更好的方法？提前致谢。

【问题讨论】：

还有许多其他使用 MutationObserver 的示例，以及包装库。

【参考方案1】：

我会创建一个mutation observer 并将其添加到页面加载后注入的内容脚本中。

下面的代码正在监听添加到 body 元素的图像，并且每秒触发一个事件以模拟添加到 DOM 的图像

// select the target node
var target = document.querySelector('body');

// create an observer instance
var observer = new MutationObserver(function(mutations) 
    mutations.forEach(function(mutation) 
      var nodes = mutation.addedNodes;
      var node;
      for(var n = 0; node = nodes[n], n < nodes.length; n++) 
          if(node.tagName == "IMG") 
            console.log("Image found");
          
      ;
    );
);

// configuration of the observer:
var config =  attributes: false, childList: true, subtree: true, characterData: false ;

// pass in the target node, as well as the observer options
observer.observe(target, config);


setInterval(function() 
  var i = new Image();

  document.body.appendChild(i);

, 1000);

【讨论】：

我在控制台中没有任何消息。

你看到他们加载了吗：jsbin.com/faqipi/latest

这里可以，但不能在 facebook 或 google 图形上。

那是因为它错过了config 中的subtree: true，如链接的重复问题所示。