javascript - 使用 Chrome 扩展程序中的 POST 数据创建链接

Question

我创建了一个 Chrome 扩展程序，它将 POST 请求发送到某个服务器并获取其响应，然后根据数据显示数字徽章。

现在我想根据用于向服务器发送 POST 请求的数据在 popup.html 中创建一个链接，以便用户可以在网站上看到数据(数据源)。

这是我在 popup.js 中用于发送 POST 请求的代码

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://someserver/path', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
    var regex = new RegExp(/ID:\d+/g);
    var testregex = regex.test(this.responseText);
    if (testregex == true) {
        var count = this.responseText.match(/ID:\d+/g).length;
        var countext = count.toString();
        chrome.browserAction.setBadgeText({text: countext});
    } else {
        chrome.browserAction.setBadgeText({text: "0"});
    }
};
getCurrentTabUrl(function(url) {
var cleanurl = url.match(/^https?\:\/\/([^\/:?#]+)(?:[\/:?#]|$)/i);
xhr.send('search=' + cleanurl[1] +'&submit=Search');
});

问题是如何使用我之前使用过的相同 POST 数据创建链接？

感谢您的帮助

Answer 1

因此，您想要查询外部服务，然后在弹出窗口中显示一些信息以及指向更多信息的链接。

让我们制作一个如何显示它的脚手架。在弹出窗口中，包含以下内容:

<div id="data-container">
  <div id="data-loading">
    <!-- Maybe add an animated spinner here, or something else -->
    Loading...
  </div>
  <div id="data-display">
    <!-- Currently empty, will add a link here -->
  </div>
</div>

按照您的意愿设置样式。然后，从您的 XHR 中:

xhr.onload = function () {
  /* ... */

  // Hide the loading notice
  document.getElementById("data-loading").style.display = "none";

  // Create the element that will show more details;
  //  <a href="#"> works okay, but consider making a button
  var link = document.createElement("a");
      link.href = "#";
      link.text = "More details..." // Add data from xhr.responseText?
      link.addEventListener("click", clickHandler);

  var container = document.getElementById("data-display");

  // Make sure the container is empty (in case we're calling this again)
  while (container.lastChild) node.removeChild(container.lastChild);

  // Append more elements if you want to display some data
  container.appendChild(link);
};

现在有趣的部分:clickHandler 点击处理程序。要从弹出窗口打开新选项卡，您应该使用 chrome.tabs.create():

function clickHandler() {
  chrome.tabs.create({
    url: /* ??? */
  });
}

如果我们想打开一个普通的 GET 页面，那就很简单了。要打开 POST 页面，我们必须作弊。主要有两种可能性:

1. 打开执行 POST 的 javascript: URL。从概念上讲更容易，但仅适用于短参数。

2. 在您的扩展程序中打开一个将执行 POST 的帮助程序页面。这允许您在 POST 发生之前传递任意大的参数。

这两个问题都包含在这个问题中:Chrome Extension Development - POST to new tab