Chrome 用于分析特定 div 中某个数字的页面源代码的扩展

Question

我正在尝试构建一个相当复杂的 Chrome 扩展，因此我只是在寻找有关如何处理此问题的高级概述。请记住，我是 Chrome 扩展的新手。

我需要一个扩展程序来分析页面的源代码，并专门监视该页面上 div 中的数字。每当该数字超过某个阈值时，我将需要采取某种措施（弹出窗口、警报等）。

源页面每隔几秒自动刷新一次更新信息，因此我需要每隔几秒扩展一次运行以捕获最新数据。

总的来说，我正在寻找有关如何执行以下操作的建议：

每 5 秒检索一次非活动选项卡的页面源。它应该运行在后台运行，不需要 "clicked" 即可运行。
查看该源代码以查找特定 div 中的数字。
如果该数字超过特定阈值，则创建某种警报或通知。

我看过各种关于如何获取活动页面源代码的帖子，但没有看到关于存储要分析的源代码的帖子。另外，我不确定应该如何查看源代码（我看到了一些 JQuery 的建议）。

最后一个想法：我希望这是一个相对轻量级的扩展。运行每 5/10/15 秒执行此过程是否会占用大量资源？

Answer 1

由于对 DIV 的更改是通过页面中的 Javascript 进行的，因此您必须使用呈现引擎实际加载页面（而不仅仅是加载页面源代码），然后查看 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

Chrome 用于分析特定 div 中某个数字的页面源代码的扩展

Chrome Extension to analyze page source code for a number in a specific div

javascript

jquery

google-chrome

google-chrome-extension