Получить элемент из Gmail DOM с Chrome расширениями

Question

Я пытаюсь получить элемент из DOM Gmail. Элемент имеет класс с именем « .yP » (это элемент, который показывает имена людей, вовлеченных в электронную почту в списке входящих).

В поле манифеста I иметь эту запись:

    "content_scripts": [
    {
        "matches": [
            "https://mail.google.com/*", 
            "https://inbox.google.com/*"
        ],
        "css": ["styles/test.css"],
        "js": [
            "libraries/jquery-3.4.1.min.js",
            "content-scripts/test.js"
        ],
        "run_at": "document_end"
    }
]

Содержимое файла CSS таково:

.yP:hover {
   background-color: yellow;
}

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

Но проблема в том, что я пытаюсь получить эти элементы в своем тесте сценария содержимого. js. Список всегда нулевой. Однако, если я делаю ту же инструкцию в консоли разработчика, она отлично работает.

var list = document.getElementsByClassName("yP");
console.log("List: " + list);

Что я делаю не так?

Заранее спасибо!

Answer 1

Ваш javascript, вероятно, вызывается до загрузки страницы с классом, который вы ищете.

Вы пробовали обернуть его в окне на load слушатель?

window.addEventListener('load', (event) => {
  var list = document.getElementsByClassName("yP");
  console.log("List: " + list);
});

См .: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event