javascript - Chrome扩展: XHR request to website,通过类名获取html内容

Question

我正在创建一个 Chrome 扩展程序，它将转到指定的网站，并从源代码中获取该网站的部分 HTML。我想获取类名为“span1 rating-num-span”的 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);
}

难住了...感谢您的阅读!

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

事实证明，该类最初并不存在于页面上，而是通过脚本动态加载的。全部加载后如何获取页面的源代码？

Answer 1

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

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

您有两个选择:

1. 找出该网页的代码如何从服务器/其他地方获取数据并自己完成，通常有某种 JSON API。例如，在本例中，页面中有一个巨大的配置对象:

   <script>
     window.pageData.courseObj = {"ratings": [{"count": 375, "rating": .............
   

   只需使用带有 .responseType = "document" 模式的 XMLHttpRequest 并获取该元素，然后对其使用 JSON.parse 即可。

   或者，实际上，在这种情况下，一个简单的 regexp + 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"}

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

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

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