Как дождаться появления элемента на странице?

Question

Цель: Сделать расширение для плеера ютуба (всякие плюшки).

Для начала мне нужно выловить элемент <video>, у него есть классы, я например проверяю по .html5-main-video. С этим возникли трудности.

Начал я с использования:

const skipNodeName = ['#text', '#comment'];

document.addEventListener('DOMNodeInserted', elementInserted);

function elementInserted(e)
{
    let element = e.target;

    if (skipNodeName.includes(element.nodeName))
    {
        return;
    }

    if (element.classList.contains('html5-main-video'))
    {
        console.log('element found!');

        element.addEventListener('timeupdate', onChangeTime); // следим за изменением времени
        element.addEventListener('ratechange', onChangeSpeed); // следим за изменением скорости

        element.playbackRate = playbackSpeed;
    }
    else if (element.tagName == 'VIDEO')
    {
        console.log(element);
        console.log(element.classList);
        console.log(element.classList.contains('html5-main-video'));
    }
}

Почему-то classList иногда пустой, иногда имеются два нужных класса, но contains возвращает false.

Дальше я решил попрообовать "модную" штуку MutationObserver
Я думаю использовать его идея хорошая, но я не понимаю как мне найти нужный мне элемент и какие параметры в конфигурации обсервера лучше использовать.

let observer = new MutationObserver(elementInserted);
observer.observe(document, { attributes: true, characterData: true, childList: true, subtree: true });


function elementInserted(changes, observer)
{
    console.log(`change:`);
    console.log(changes);
    console.log(`observer:`);
    console.log(observer);

    console.log('page changed');
}

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

[UPD] Страница долго грузилась из-за открытого DevTools.

Answer 1

Покопавшись по многим форумах, сайтах и изучив довольно много примеров, я все же нашел ответ на вопрос:

let observer = new MutationObserver((mutations) =>
{
    for (let mutation of mutations)
    {
        for (let node of mutation.addedNodes)
        {
            if (!(node instanceof HTMLElement))
            {
                continue;
            }

            if (node.classList.contains('html5-main-video'))
            {

                node.addEventListener('timeupdate', onChangeTime); // следим за изменением времени
                node.addEventListener('ratechange', onChangeSpeed); // следим за изменением скорости

                node.playbackRate = playbackSpeed;
            }
        }
    }
});

observer.observe(document, { subtree: true, childList: true });

БЛОГ НА HUSL

Как дождаться появления элемента на странице?

Ответы (1 шт):