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

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

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

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


javascript google-chrome-extension content-script
person DannyF247    schedule 14.07.2014    source источник
comment
См. манифест и, в частности, run_at, т. е. run_at: document_start   -  person Xotic750    schedule 14.07.2014
comment
@ Xotic750 Запуск в document_idle или document_end дает эффект, который я описал в OP. Выполнение в document_start не приводит к результату, так как элемент страницы, который нужно изменить, еще не существует.   -  person DannyF247    schedule 14.07.2014
comment
@DannyF247 См. этот канонический вопрос. Вводить при запуске, слушать изменения.   -  person Xan    schedule 14.07.2014
comment
Точно run_at document_start и, если элемент еще не существует, используйте MutationObserver следить за добавлением элементов в DOM.   -  person Xotic750    schedule 14.07.2014

Ответы (1)


arrow_upward
1
arrow_downward

Как указано в комментариях, вставьте сценарий содержимого в «document_start», используя параметр manifest "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

person Xotic750    schedule 14.07.2014
comment
document.body еще не существует в document_start. Если я правильно помню, document.documentElement делает. - person Xan; 14.07.2014
comment
(Кстати, я не ОП) Ожидание DOMContentLoaded эквивалентно работе в document_end, и это именно то, чего ОП не хочет. Ваш код хорош, за исключением элемента, к которому вы присоединяетесь с помощью вызова observe. - person Xan; 14.07.2014
comment
Вместо этого просто добавьте MutationObserver к document. - person Xotic750; 14.07.2014