獲取頁面源代碼擴展

Question

我目前正在開發一個Chrome擴展，其中我必須獲取頁面的HTML源代碼。我目前使用Chrome Messaging。下面是我的源代碼：

background.js

chrome.webNavigation.onComplete.addListener(function(e) { 
     chrome.tabs.sendRequest(e.tabId, { 
      action: 'getSource' 
     }, function(r) { 
      console.log(r); 
     }); 
}); 

contentscript.js

chrome.extension.onRequest.addListener(function(request, sender, callback) { 
    if (request.action == 'getSource') 
     callback(document.documentElement.outerHTML); 
}); 

這是非常緩慢的，因爲我不得不等待每一個數據（如圖像，JavaScript的等）已被下載以獲取頁面的來源。

難道這是另一種方式嗎？謝謝。

Answer 1

移動等待邏輯您的清單：
→設置你的內容腳本在你的清單文件中run_at屬性document_end。

這將在加載DOM之後運行內容腳本，但在加載任何子資源（例如圖像）之前之前的。

在「document_end」的情況下，在DOM完成後立即注入文件，但在加載像圖像和幀之類的子資源之前注入文件。

—谷歌文檔

在你contentscript，發送HTML直接在你的後臺腳本：

var html = document.documentElement.outerHTML; 
chrome.extension.sendMessage(null, html); 

但要注意，注入的JavaScript頁面可以修改HTML這樣就可以結束了使用與瀏覽器中不同的HTML。