Chrome 扩展：对网站的 XHR 请求，通过 class 名称获取 html 内容

Question

我正在创建一个 chrome 扩展，它将转到指定的网站，并从源代码中获取网站 HTML 的部分内容。我想获取名称为 'span1 rating-num-span'.div 的 div 中包含的 html 内容

我尝试使用 .getElementsByClassName 但它返回未定义，但是当我在 ('h2') 上使用 .getElementsByTagName 时它起作用了。

这是从我的 main.js

发出请求的 javascript 函数

function getFlowSite(){
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
    if (request.readyState == 4){
        if (request.status == 200){
            var temp = document.createElement('div');
            temp.innerHTML = request.responseText;

            alert(temp.getElementsByTagName('h2')[0].innerText);
            alert(temp.getElementsByClassName('span1 rating-num-span')[0].innerText);


        }
        else{
            console.log("Messed up!!!");
        }
    }
};
request.open("GET", "http://uwflow.com/course/" + courseName, true);
request.send(null);
}

难倒... 感谢阅读！

--------------------更新------------------------

原来 class 最初并不出现在页面上，而是通过脚本动态加载的。全部加载进去后如何获取页面的源代码？

Answer 1

该元素由页面脚本动态添加。

它最初没有出现在页面上。您可以通过在打开 devtools 网络面板加载站点时检查站点的第一个服务器响应来检查这一点。或者，如果您使用出色的 uBlock（原始）扩展，只需暂时禁用站点上的所有 javascript 并重新加载页面。

你有两个选择：

找出该网页的代码如何从server/elsewhere中获取数据，然后自己动手，通常会有某种JSON API。例如，在这种情况下，页面中有一个巨大的配置对象：
```
<script>
  window.pageData.courseObj = {"ratings": [{"count": 375, "rating": .............
```
只需使用具有 .responseType = "document" 模式的 XMLHttpRequest 并获取该元素，然后在其上使用 JSON.parse。

或者，实际上，在这种情况下，一个简单的正则表达式 + JSON.parse 就可以：
```
var match = request.responseText
                   .match(/window\.pageData\.courseObj\s*=\s*(\{.+?\});\s*[\r\n]/);
var config = JSON.parse(match[1]);
config.ratings.forEach(function(r) { console.log(r) });
```
Object {count: 375, rating: 0.6986666666666667, name: "usefulness"}
Object {count: 494, rating: 0.7449392712550608, name: "easiness"}
Object {count: 555, rating: 0.5621621621621622, name: "interest"}

以上代码未经现场测试，不包含任何必须在真实代码中实现的错误检查。

将页面作为普通浏览器选项卡加载而不激活它，注入内容脚本，等待元素出现，提取数据，关闭选项卡

manifest.json:

"permissions": ["http://uwflow.com/*"] - 非活动选项卡上的 executeScript 权限

popup.js:

var globalTabId = 0;

function openTab(url) {
    chrome.tabs.create({url: url, active: false}, function(tab) {
        globalTabId = tab.id;
        chrome.tabs.executeScript(tab.id, {file: "getData.js", runAt: "document_end"});
    });
}

chrome.runtime.onMessage.addListener(function(msg, sender, response) {
    if (msg.action == "data" && sender.tab && sender.tab.id == globalTabId) {
        chrome.tabs.remove(globalTabId);
        processData(msg.data);
    }
});

getData.js，这是一个内容脚本，但不需要在manifest.json.

中声明

var interval = setInterval(function() {
    var ratings = document.querySelector(".span1.rating-num-span");
    if (!ratings) {
        return;
    }
    clearInterval(interval);
    chrome.runtime.sendMessage({action: "data", data: {ratings: ratings.textContent}});
}, 100);

Chrome 扩展：对网站的 XHR 请求，通过 class 名称获取 html 内容

Chrome extension: XHR request to website, get html content by class name

html

javascript

jquery

xmlhttprequest

google-chrome-extension