滚动后 Chrome 扩展程序不起作用

Question

我有一个关于我正在制作的 Chrome 扩展程序的问题。我尝试创建一个类似的扩展，它将网站上的所有图像替换为猫图像：

https://blog.lateral.io/2016/04/create-chrome-extension-modify-websites-html-css/

我在 Facebook 上试过。

代码很简单：

var images = document.getElementsByTagName('img');
for (var i = 0, l = images.length; i < l; i++) {
  images[i].src = 'http://placekitten.com/' + images[i].width + '/' + images[i].height;
}

我遇到的问题是它仅适用于首次出现在 Facebook 上的图像，并且在滚动一段时间后它会停止替换图像。此外，当向上滚动时，最初被替换的图像现在又回到了原始状态。

我有什么办法可以解决这个问题，即使在向下滚动后加载新图像时，扩展程序也可以在整个网站上运行？ 谢谢！

Answer 1

您需要确保在出现新图像时重新运行您的代码。最简单的解决方案是让 setInterval() 定期调用它。使用 Mutation Observers 可以完成更有效的解决方案。可能还有其他方法可以检测出现的新图像，例如检查窗口的高度或监听用户操作（例如滚动）。