从外部页面获取文本片段到Google Chrome扩展程序

时间:2012-06-03 15:41:43

标签: javascript html google-chrome-extension

我正在尝试开发一个简单的Google Chrome扩展程序。它的作用是显示页面上的下载次数(计数)并在弹出窗口中显示。

需要监控的相关页面是一个只能在登录后才能访问的页面。

所以我需要基本上使用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扩展,并尝试了解它是如何工作的,但它似乎利用'feeds'来获取它的数据。任何人都能指出我正确的方向吗?提前谢谢!

1 个答案:

答案 0 :(得分:2)

如果您只想在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获取你的rep点......

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();