如何在Chrome擴展中從網站獲取滿載的HTML源代碼

我需要在我的擴展中的DevTool控制檯的Elements窗口中找到的源代碼。我嘗試使用內容腳本如何在Chrome擴展中從網站獲取滿載的HTML源代碼

var text = document.documentElement.innerHTML;

注射的擦肩而過，「完整」的狀態之後，從chrome.tabs.onUpdated.addListener，但我只recived的HTML代碼，而動態創建的內容。

特別是我希望我的擴展能夠動態地添加所有「div」。

任何幫助將不勝感激！

來源

2015-07-21 Eugenio Nerio Nemmi

一旦加載了初始頁面內容，將觸發complete事件。它與動態生成的內容沒有任何關係，否則它將不得不無限期地等待，因爲更多的內容可能會隨後添加。

如果您對特定元素感興趣，可以使用setTimeout定期輪詢元素。像這樣：

function getElement() { 
    return new Promise(function(res, rej) { 
     var interval = setInterval(function() { 
      var elm = document.getElementById('the-element-you-want'); 
      if(elm){ 
       clearInterval(interval); 
       res(elm); 
      } 
     }, 10); 
    }); 
}

另一種選擇是使用一個MutationObserver所需元件（一個或多個）已被創建時被檢測到。

來源

2015-07-21 16:31:33 levi

我不知道元素的名稱，但我需要搜索通常包含在iframe或div中的特定文本。另外，我需要的是自狀態==完成後生成的內容。我需要解析一些匹配的整個文本（我通常需要的不是在基本的DOM，但顯示在頁面上）。我希望我明確自己。事實是，我看到一些不同之間的網站的DOM和我實際看到的頁面！謝謝！ –

@EugenioNerioNemmi在這種情況下，您可以使用'setTimeout'定期檢查文本是否存在。或者，使用'mutationObserver'，檢查所有新元素以查看它們是否包含所需的文本。一旦知道文本存在，就可以繼續解析整個DOM。 – levi

解決了！非常感謝你，你很有幫助！ –

如何在Chrome擴展中從網站獲取滿載的HTML源代碼

回答

相關問題