在 Chrome 扩展中访问 XML 响应答案

【问题标题】：Accessing XML response in Chrome Extension在 Chrome 扩展中访问 XML 响应
【发布时间】：2020-12-06 22:05:08
【问题描述】：

我正在开发一个非常简单的 Chrome 扩展程序，但在尝试发出 XML 请求以访问当前选项卡上的数据时卡住了。

按原样，当点击扩展图标时，我可以让扩展访问标签数据，包括 URL。当它这样做时，它运行background.js 脚本。但我只能发送请求，从不访问响应。我已经尽我所能尝试了，但是检查.readyState 属性告诉我请求没有完成。有什么想法吗？

现在我只是想输出到控制台，以表明我正在以一种我可以使用的形式获取数据，我稍后会充实我将要使用它做什么。

扩展文件如下：

manifest.json

{"manifest_version": 2,
  "name": "ThisIsATest",
  "version": "0.1",
  "permissions" : [
    "activeTab"
  ],
  "background" : {
    "scripts" : ["background.js"],
    "persistent" : false
  },
  "browser_action" : {
    "default_title" : "Log Page Source Code"
  }
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    console.log('Getting URL: ' + tab.url);
    var xreq = new XMLHttpRequest();
    console.log(xreq.readyState);
    xreq.open('GET', tab.url);
    console.log(xreq.readyState);
    xreq.responseType = "text";
    xreq.send();
    console.log(xreq.response);
});

【问题讨论】：

这不是 XHR 的使用方式。您需要使用其load 事件或readystatechange。寻找例子，有很多。
这能回答你的问题吗？ How do I return the response from an asynchronous call?

标签： javascript google-chrome google-chrome-extension xmlhttprequest

【解决方案1】：

您必须等待响应，因为这可能需要一段时间：

xreq = new XMLHttpRequest();
xreq.open('GET', tab.url);
xreq.onload = function () {
    console.log(xreq.response);
}
xreq.send();

您也可以只使用 fetch:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch，因为它更容易。

【讨论】：