Изменить элемент страницы, как только он будет загружен
В настоящее время я пишу очень простое расширение 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