加载后立即修改页面元素

Question

我目前正在编写一个非常简单的Google Chrome浏览器扩展程序，它利用内容脚本，通过抓取元素并在页面完成加载时附加到其网页上，将其他文本简单地添加到网页上。

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

我抓的元素是span。有没有什么方法可以监听这个元素，以便我可以尽快修改它？

Answer 1

正如在评论中指出，在“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