用于操作 Facebook 图像的 Javascript 代码在控制台中有效，但在扩展中无效

Question

我一直在尝试创建一个基于 GeckoView 的网络扩展程序，用于在我的 facebook 移动提要上下载图像。因此，作为第一次运行，我使用谷歌浏览器中的 Inspect> 控制台来测试一个简单的脚本来检测所有图像并使边框变为红色：

var imgs=document.getElementsByTagName("img");
for (i=0;i<imgs.length;i++)
{
imgs[i].style.border="3px solid red";
}  

上述代码行在谷歌浏览器控制台中运行良好，适用于许多网站（包括 facebook）。但是，当我将 JS 代码打包为 geckoview Web 扩展的内容脚本时，它根本无法工作！以下是我迄今为止尝试过的所有技巧：

1. 通过包含以下内容确保在文档之后加载 content_script：

     "content_scripts": [{
          "run_at": document_end,
         "js": ["myscript.js"],
         "matches": ["<all_urls>"],
         "match_about_blank": true,
         "all_frames": true }]
   

   也试过了："run_at": document_idle.

2. 使用 document.wrappedJSObject.getElementsByTagName("img") 确保“X 射线”视力关闭

3. 取消注册和重新注册 Web 扩展。

这些都不起作用。有趣的是，网络扩展适用于除 facebook 之外的所有其他网站！ 所以我怀疑我有两个问题之一：

1. Facebook 在隐藏 DOM 方面做得非常出色！
2. GeckoView 无法访问“动态生成”图像元素的 DOM。

任何帮助将不胜感激:)

Answer 1

我刚刚对其进行了测试，并且扩展程序对我来说是书面的。您编写的代码只会捕获加载时页面上预设的图像，但 Facebook 网站的大部分内容都是在此之后动态加载的，这可能就是您没有看到大多数图像添加边框的原因。

您需要一种方法来观察 DOM 的变化并捕获动态添加的所有新图像，以便按照您的预期方式工作。例如。使用MutationObserver：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

function observe() {
  var imgs = document.getElementsByTagName("img");
  for (i = 0; i < imgs.length; i++) {
    imgs[i].style.border="3px solid red";
  }
}

// Select the node that will be observed for mutations
const targetNode = document.body;

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Create an observer instance linked to the callback function
const observer = new MutationObserver(observe);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Trigger for static content
observe();