javascript - 将外部页面的文本片段获取到 Google Chrome 扩展程序中

Question

我正在尝试开发一个简单的谷歌浏览器扩展。它的作用是显示页面上的下载次数(计数)并将其显示在弹出窗口中。

需要监控的页面是登录后才能访问的页面。

所以我基本上需要使用 html 和 javascript 从页面中“抓取”计数并将其显示在弹出窗口中。到目前为止，我已经创建了扩展的准系统:

{
  "name": "Downloads Logger",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Monitors Number Of Downloads",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://exampledownloadpage.com/loggedin/"
  ]
}

接下来我该做什么？我需要扩展程序的背景页吗？我已经阅读了扩展文档并解压了官方 gmail 扩展并尝试查看它是如何工作的，但它似乎利用“提要”来获取其数据。有人能指出我正确的方向吗？预先感谢您!

Answer 1

如果您只想在 browser_action 中显示下载数量，那么您不需要后台页面，但如果您想监控每分钟左右的下载量，那么您就需要。要获取下载计数，您可以使用 XMLHttpRequest 下载页面源，然后使用...将其解析为 dom。

var page = document.implementation.createHTMLDocument("");
page.documentElement.innerHTML = pageSource;  // assuming the source for the page you downloaded with httprequest is in pageSource

...然后您可以使用像 querySelector 这样的东西来获取您感兴趣的页面位的文本，例如...

downloadstats = page.querySelector('.downloadstats').textContent.trim();

希望这能让您入门。

这是一个简单的(没有错误检查或其他什么的)示例，可以从 stackoverflow 获取代表点......

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
        var page = document.implementation.createHTMLDocument("");
        page.documentElement.innerHTML = this.responseText;
        var score = page.querySelector('[title^="your reputation;"]').textContent.trim();
        alert('You have ' + score + ' rep points.');
    }
}
xmlhttp.open("GET", "http://stackoverflow.com", true);
xmlhttp.send();