Javascript Код для управления изображениями Facebook работает в консоли, но не в расширении

Question

Я пытался создать веб-расширение на основе GeckoView для загрузки изображений на мой мобильный канал в Facebook. Для первого запуска я использовал консоль Inspect> в google chrome, чтобы протестировать простой скрипт для обнаружения всех изображений и сделать рамку красной:

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

Вышеуказанные строки кода прекрасно работают в google chrome консоль для ряда сайтов (включая фейсбук). Однако когда я упаковываю код JS в качестве скрипта содержимого для веб-расширения geckoview, он просто не работает! Вот все уловки, которые я пробовал до сих пор:

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")

3. Отмена регистрации и перерегистрация веб-расширения.

Ничего из этого не сработало. Интересно, что веб-расширение работает на всех других сайтах, кроме 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();