在新窗口中打开 XMLHttpRequest 的 responseText答案

【问题标题】：Open XMLHttpRequest's responseText in new window在新窗口中打开 XMLHttpRequest 的 responseText
【发布时间】：2016-07-25 11:23:14
【问题描述】：

有没有办法在新窗口中打开 XMLHttpRequest 的 responseText 作为工作网页？

详细信息：我正在构建一个 chrome 扩展程序，它通过发出 XMLHttpRequest 并比较上一版本的 responseText（来自 background.js）来查找网站上的更改。发现更改后，它会通过 chrome 通知通知用户。单击此通知后，我想打开一个包含此确切数据 (xhttp.response) 和原始 URL 的选项卡，不对网站提出任何新请求。这对于此扩展在拍卖相关网站和限时抢购期间正常工作非常重要。请注意，我需要此应用程序在后台运行，甚至不占用 chrome 渲染图像/字体所需的资源（这就是为什么我不使用名为 Refresh Monkey 的 chrome 扩展名）。我试过window.open('data:text/xml,' + xmlhttp.responseText)，但它似乎根本没有做任何事情！

如果没有办法做到这一点，那么我将简单地使用 window.open(url) 在新选项卡中打开网页。这将再次加载整个网页，有没有办法让它加载得更快，因为我刚刚在 XMLHttpRequest 上加载了这个确切的 url。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

标签： javascript ajax google-chrome-extension xmlhttprequest

【解决方案1】：

我建议您致电chrome.tabs.create 以使用预定义的本地 html 页面创建一个新选项卡。在那个 html 页面中，你可以调用chrome.runtime.sendMessage 来通知后台页面它已经创建并想要检索 responseText，一旦收到响应，将其显示在页面中。

示例代码：

背景页面：

chrome.tabs.create({ url: 'predefined.html' });

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getText') {
    sendResponse({text: 'YOUR RESPONSE TEXT HERE'});
  }
});

predefined.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="textId"></p>
    <script src="predefined.js"></script>
</body>
</html>

predefined.js

chrome.runtime.sendMessage({action: 'getText'}, function(response) {
    document.getElementById('textId').innerText = response.text;
});

【讨论】：

非常感谢！这几乎是完美的。由于原始 URL 应该是完整的（以便“购买”按钮起作用），我保留了一个加载有目标 URL 的选项卡。当后台发现更改时，通过注入“document.body.innerHTML.innerText = response.text;”来更新此选项卡。这可以按需要工作（AFAIK）。但我认为在不打开标签的情况下也可以做到这一点。我正在查看 chrome.webRequest。非常感谢你的灵感:)
“购买”按钮或“添加到购物车”按钮将出现在像 amazon/ebay 这样的网站上。这就是我写“工作网站”的原因
[续]... 因为目标网址也应该相同。另外，我尝试了您的方法，相对链接不起作用，如果 html 具有相对 url，则任何图像/css/js 都不会加载。（浏览器正在尝试查找这些文件 chrome-extension://.... url）另外，在我的最后一条评论中进行编辑：我想写 [document.body.innerHTML = xhttp.responseText; ] 而不是 [document.body.innerHTML.innerText = xhttp.responseText; ]
@MyUniqueName，看来我完全误解了你的问题。我认为您想要的是打开一个新选项卡并显示动态检索的数据。