Question

是否有一个简单的解决方案将动态聚合数据POST到新标签中？

chrome.tabs.create没有'POST'选项。通常我会用

chrome.browserAction.onClicked.addListener(function (t) {
  chrome.tabs.create(
  {
    "url" : "http://super.url",
    "method" : "POST" // oops.. no option.
  });
});

Answer 1

您可以简单地将这两种技术结合起来：

您可以通过在地址栏中添加javascript:前缀或href个<a>标记值来执行JavaScript命令。
只有使用JavaScript，您才能创建表单元素并将其填入数据，然后将其POST。

function fakePost() {   
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "http://cvsguimaraes.altervista.org/fiddles/postcheck.php");
    var params = {userId: 2, action: "delete"};
    for(var key in params) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);
        form.appendChild(hiddenField);
    }
    document.body.appendChild(form); // Not sure if this step is necessary
    form.submit();
};
//minify function
fakePostCode = fakePost.toString().replace(/(\n|\t)/gm,'');

chrome.browserAction.onClicked.addListener(function (t) {
  chrome.tabs.create({"url" : "javascript:"+fakePostCode+"; fakePost();"});
});

当然，这只是一个肮脏的黑客。如果您需要更好的东西，可以使用XHR Object或者更详细地说明@Xan的答案。

Answer 2

cvsguimaraes'答案中的代码适用于可以放入URL的短数据字符串。正如this question所证明的那样，并非总是如此。

Kenny Evitt的回答提示解决方案。我为这个问题做了一个实现，并花时间来概括它。我在这里介绍它。

想法是打开与扩展程序捆绑在一起的页面（post.html），通过消息传递为其提供所需信息，并从该页面执行POST。

<强> post.html

<html>
  <head>
    <title>Redirecting...</title>
  </head>
  <body>
    <h1>Redirecting...</h1>
    <!-- Decorate as you wish, this is a page that redirects to a final one -->
    <script src="post.js"></script>
  </body>
</html>

<强> post.js

var onMessageHandler = function(message){
  // Ensure it is run only once, as we will try to message twice
  chrome.runtime.onMessage.removeListener(onMessageHandler);

  // code from https://stackoverflow.com/a/7404033/934239
  var form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", message.url);
  for(var key in message.data) {
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", key);
    hiddenField.setAttribute("value", message.data[key]);
    form.appendChild(hiddenField);
  }
  document.body.appendChild(form);
  form.submit();
}

chrome.runtime.onMessage.addListener(onMessageHandler);

background.js （或扩展程序中的其他非内容脚本）

function postData(url, data) {
  chrome.tabs.create(
    { url: chrome.runtime.getURL("post.html") },
    function(tab) {
      var handler = function(tabId, changeInfo) {
        if(tabId === tab.id && changeInfo.status === "complete"){
          chrome.tabs.onUpdated.removeListener(handler);
          chrome.tabs.sendMessage(tabId, {url: url, data: data});
        }
      }

      // in case we're faster than page load (usually):
      chrome.tabs.onUpdated.addListener(handler);
      // just in case we're too late with the listener:
      chrome.tabs.sendMessage(tab.id, {url: url, data: data});
    }
  );  
}

// Usage:
postData("http://httpbin.org/post", {"hello": "world", "lorem": "ipsum"});

请注意双重消息：使用chrome.tabs.create回调，我们无法确定侦听器是否已准备就绪，我们也无法确定它是否已完成加载（尽管在我的测试中，它始终仍在加载）。但比抱歉更安全。

Answer 3

来自@Amman Cheval对这个问题的评论：

[发送]您的动态数据到后台文件，创建一个包含表单的新选项卡。使用背景文件使用内容使用表单填写表单，然后提交表单。

首先阅读Google文档中的内容脚本。然后阅读消息传递。在您了解了所有这些之后，从脚本，后台以及不同选项卡的脚本发送消息会非常简单。

Chrome扩展程序开发 - POST到新标签页

3 个答案: