Question

我正在尝试构建一个相当复杂的Chrome扩展程序，所以我只是在寻找一个如何处理这个问题的高级概述。请注意，我是Chrome扩展程序的新手。

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

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

作为概述，我正在寻找有关如何执行以下操作的建议：

每5秒检索一次非活动标签页的来源。它应该在后台运行，不需要点击＆＃34;运作。
查看该源代码以查找特定div中的数字。
如果该数字超过某个阈值，则创建某种警报或通知。

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

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

Answer 1

由于在页面中使用Javascript对DIV进行了更改，因此您必须使用呈现引擎实际加载页面（不仅仅是加载页面源），然后查看DIV元素以查看内容已经改变了。

您可以使用内容脚本轻松完成此操作。创建一个将在您要加载的页面中运行的内容脚本（通过在manifest.json中使用＆＃34;匹配＆＃34;参数设置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中执行此操作，您必须确保您的内容脚本具有＆＃34; all_frames＆＃34;值在manifest.json中设置为true。

Chrome扩展程序可分析特定div中数字的页面源代码

1 个答案: