Изменить элемент страницы, как только он будет загружен

В настоящее время я пишу очень простое расширение Google Chrome, которое использует скрипты контента, чтобы просто добавить дополнительный текст на веб-страницу, захватывая элемент и добавляя к нему innerHTML когда страница закончит загрузку.

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

Элемент, который я хватаю, span, Есть ли способ прослушивания загрузки этого элемента, чтобы я мог изменить его как можно скорее?

1 ответ

Как указано в комментариях, введите ваш контент-скрипт в "document_start", используя настройку манифеста "run_at"

Тогда используйте MutationObserver на document слушать, чтобы это было добавлено.

Javascript

new MutationObserver(function (mutations) {
    mutations.some(function (mutation) {
        console.log(mutation);
        if (mutation.type === 'childList') {
            return Array.prototype.some.call(mutation.addedNodes, function (addedNode) {
                if (addedNode.id === 'added') {
                    mutation.target.textContent = 'Added text';
                    return true;
                }

                return false;
            });
        }

        return false;
    });
}).observe(document, {
    attributes: false,
    attributeOldValue: false,
    characterData: false,
    characterDataOldValue: false,
    childList: true,
    subtree: true
});

document.addEventListener('DOMContentLoaded', function onDOMContentLoaded() {
    var div = document.createElement('div');

    div.id = 'added'
    document.body.appendChild(div);
    console.log('Added a div');
}, true);

На jsFiddle

Другие вопросы по тегам