Не получается получить данные элемента в расширении Chrome?

Question

[ecid1]

Первый раз делаю расширение для Chrome, столкнулся с проблемой поиска элемента на странице.

Есть content_scripts

const el = document.getElementsByClassName("idValue_CTSgV");
console.log(el);

Возвращает массив с элементом

Но при попытке достать из элемента innerHTML

const el = document.getElementsByClassName("idValue_CTSgV")[0].innerHTML;
console.log(el);

Возникает ошибка


Причём это только на том сайте, для которого пишу расширение. Пробовал аналогично получать элементы на других сайтах, всё работает.

Comments

[Aetae]

Также тебе полезно будет знать: окончания у классов вида _CTSgV - это сгенерированый хэш и при каждом обновлении версии клиентского кода он будет меняться, потому лучше не привязывать свои расширения к таким классам.
Как вариант можно воспользоваться querySelector\querySelectorAll с селектором по атриубуту: document.querySelector('[class^="idValue_"]') получит первый элемент с классом начинающимся на idValue_.

Answer 1

[Stockholm Syndrome]

метод getElementsByClassName возвращает живую коллекцию HTMLCollection, то есть её размер обновляется в реальном времени в соответствии с текущей разметкой DOM-дерева

на момент, когда вы вызвали метод, элемента ещё не было в дереве, а когда вы заглянули в консоль и развернули HTMLCollection, консоль показала вам текущее состояние коллекции

для такой задачи лучше всего использовать MutationObserver

Answer 2

[Stalker_RED]

Вероятно элемент создается скриптом или загружается динамически.
В расширении код выполняется сразу? Добавьте setTimeout, например.