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页面，我们必须作弊。主要有两种可能性：

打开执行POST的javascript:网址。在概念上更容易，但仅适用于短参数。
在您的扩展程序中打开一个将执行POST的帮助页面。这允许您在POST发生之前传递任意大的参数。

这个问题涵盖了这两个问题：Chrome Extension Development - POST to new tab

使用chrome扩展程序创建一个包含POST数据的链接

1 个答案: