加載後立即修改頁面元素

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