Расширение Chrome не ожидает загрузки DOM

Question

Расширение Chrome не ожидает загрузки DOM

1

Я пытаюсь получить доступ к любому элементу на YouTube из сценария содержимого.

manifest.json

"content_scripts": [
    {
      "run_at": "document_end",
      "matches": ["*://www.youtube.com/watch?v=*"],
      "js": ["content/content.js"]
    }
  ]

Однако при регистрации элемента я иногда получаю null, и иногда элемент регистрируется.

content.js

document.addEventListener('DOMContentLoaded', afterDOMLoaded)

function afterDOMLoaded() {
    const element = document.getElementById('top')
    console.log(element)
}

Он работает при использовании setTimeout

setTimeout(function(){ 
    const element = document.getElementById('top')
    console.log(element)
}, 3000)

Я читаю здесь, что это потому, что элемент добавляется позже динамически, на странице javascript, и единственный способ решить это - использовать MutationObserver/mutation-summary. Это похоже на много хлопот за доступ к элементу. Разве нет другого пути?

Junker 07 дек. 2017, в 07:24

Источник

0

Вы можете проверить, появился ли элемент в DOM, используя setInterval но я сомневаюсь, что это лучший подход.
Konstantin Azizov 07 дек. 2017, в 06:23

Теги:

javascript

google-chrome-extension

1 ответ

Ещё вопросы

Вы можете проверить, появился ли элемент в DOM, используя setInterval но я сомневаюсь, что это лучший подход.

Mano · Answer 1 · 2017-12-07T04-25-00.000Z

Посредством загрузки асинхронно мы получим решение, выполняемое с помощью "document_idle". В случае с "document_idle" браузер выбирает время для ввода сценариев между "document_end" и сразу после возникновения события window.onload.

Обновление manifest.json

"content_scripts": [ { "run_at": "document_idle", "matches": [ "*://www.youtube.com/watch?v=*" ], "js": [ "content.js" ] } ]

В сценарии содержимого получите состояние готовности документа и выполните асинхронный путь.

HTMLDocument.prototype.ready = new Promise(function (resolve) {
if (document.readyState != "loading")
    return resolve();
else
    document.addEventListener("DOMContentLoaded", function () {
        return resolve();
    });
});

document.ready.then(function () {
    const element = document.getElementById('top')
    console.log(element)
});

Надеюсь это поможет.

Пробовал это, не сработало. Возможно, потому что страница загружает элементы динамически / асинхронно? То есть элемент, к которому я хочу получить доступ, не загружается при возникновении событий? (document.readyState и "DOMContentLoaded")