Question

我目前正在编写一个非常简单的Google Chrome扩展程序，它使用内容脚本，只需在网页加载完成后抓取元素并附加到innerHTML，就可以在网页上添加其他文字。

问题是我正在修改的网页内容丰富，需要几秒钟才能加载，因此在文本的其余部分加载几秒后才会显示其他文本。

我抓住的元素是span。是否有任何方法可以监听此元素的加载，以便我可以尽快修改它？

Answer 1

如评论中所述，使用manifest设置“run_at”将您的内容脚本注入“document_start”

然后在document上使用MutationObserver来收听要添加的内容。

的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

上

加载后立即修改页面元素

1 个答案: