querySelector возвращает null, пока не найдешь его в devtools
 

Здравствуйте,

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

document.querySelector('.crm-entity-widget-client-contact-item.crm-entity-widget-client-contact-phone')

Мне возвращает null

Но как только с помощью инструмента разработчика хром, нахожу нужный элемент в разметке, выделив его, в той же консоле, querySelector корректно отрабатывает, как такое может быть?

Скриншот консоли
https://i.ibb.co/CB4gmwv/image.jpg

Мое предположение, что содержимое страницы грузится как-то динамически, из-за чего оно не находится, но как решить эту проблему я не понимаю, попробовал все методы поиска элемента на странице, ничего не помогло

Обнаружил важный момент, элемент который я пытаюсь найти, подгружаются в iframe

upd

Нашел решение, нахожу сам iframe с помощью querySelector, а объект document со всей разметкой из этого айфрейма получаю с помощью contentWindow.document

т.е.

let dealIframe = document.querySelector('.side-panel.side-panel-container > .side-panel-content-container > iframe').contentWindow.document;
let number = dealIframe.querySelector('.crm-entity-widget-client-contact-phone');

Элемент из iframe ты из основного окна через querySelector не получишь.
Если iframe ведёт на другой домен - вешай контенскрипт и для того домена. Если на этот же - сначала получай сам iframe, жди onload и через iframe.contentDocument.querySelector получай уже нужный элемент.