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. Возможно, есть и другие способы обнаружения появления новых изображений, например, проверка высоты окна или прослушивание действий пользователя (например, прокрутка).