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。