Chrome擴展程序分析特定div中的數字的頁面源代碼

Question

我正在嘗試構建一個相當複雜的Chrome擴展程序，因此我只是在尋找有關如何處理此問題的高級別概述。請記住，我是Chrome擴展程序的全新內容。

我需要一個擴展，它將分析頁面的源代碼，並特別監視該頁面上的div中的數字。只要這個數字超過一定的閾值，我就需要採取某種行動（彈出，提醒等）。

源頁面每隔幾秒自動刷新一次更新的信息，所以我需要每隔幾秒運行一次擴展以捕獲最新的數據。

作爲概述，我正在尋找的建議如何做到以下幾點：

1. 檢索頁面源非活動標籤，每5秒。它應該在後臺運行，不需要「點擊」即可運行。
2. 調查該源代碼以查找特定div中的數字。
3. 如果該數字超過某個閾值，則創建某種警報或通知。

我看過關於如何獲取活動頁面的源的各種帖子，但沒有關於存儲要分析的源代碼的內容。另外，我不確定我應該如何去查看源代碼（我看到了一些JQuery的建議）。

最後一個想法：我希望這將是一個相對輕量級的擴展。每5/10/15秒就會通過這個過程進行資源密集型？

Answer 1

由於在頁面中使用Javascript進行DIV的更改，因此您必須實際使用渲染引擎加載頁面（而不是僅加載頁面源代碼），然後查看DIV元素以查看內容已經改變。

您可以使用內容腳本輕鬆完成此操作。創建一個將在您希望加載的頁面中運行的內容腳本（通過在manifest.json中使用「matches」參數設置URL）。

頁內廣告內容的腳本可以讀取DIV定期用這樣的：

window.setInterval(function() { 
    var THRESHOLD = 100; 
    var div = document.getElementById("theDiv"); 
    var num = parseInt(div.innerText); 
    if (num > THRESHOLD) { 
     alert('The number is: ' + num); 
    } 
    // If you need to reload the page itself to check the number 
    // then just reload the page on a regular interval 
    window.location.reload(); 
}, 10000); 

然後，您可以一次從後臺頁面在非選定的標籤加載頁面：

chrome.tabs.create({ selected: false, url: 'http://www.theurl.com' }) 

或者，如果頁面允許構圖，則可以在背景頁面中創建iframe並將其隱藏在背景頁面中：

var frame = document.createElement("iframe"); 
frame.src = 'http://www.theurl.com'; 
document.body.appendChild(frame); 

但要在iframe中執行此操作，您必須確保您的內容腳本在manifest.json中將「all_frames」值設置爲true。