Разработка расширения Chrome - POST на новую вкладку

Есть ли простое решение для динамически агрегированных данных POST в новую вкладку?

chrome.tabs.create не имеет опции "POST". Обычно я использовал

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

Ответы

Ответ 1

Вы можете просто объединить эти два метода:

Вы можете выполнять команды JavaScript, добавив префикс javascript: в свою адресную строку или в теги href тегов <a>.
Только с помощью 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 ответ ниже.

Ответ 2

Код в ответе cvsguimaraes работает для коротких строк данных, которые могут вписываться в URL-адрес. Как свидетельствует этот вопрос, это не всегда так.

Кенни Эвитт отвечает на решение. Я сделал реализацию этого вопроса и уделил время обобщению. Я представляю его здесь.

Идея состоит в том, чтобы открыть страницу в комплекте с расширением (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 (или другой неконтент script внутри расширения)

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 мы не можем быть уверены, что слушатель готов, и мы не можем быть уверены, что он еще не завершил загрузку (хотя в моем тестировании он всегда по-прежнему загружается). Но лучше безопасно, чем жаль.

Ответ 3

От @Amman Cheval комментирует вопрос:

[отправить] ваши динамические данные в фоновый файл, создав новую вкладку, которая включает в себя форму. Заполните форму, используя форму, используя содержимое, используя фоновый файл, и отправьте форму.

Сначала прочтите сценарии содержания в документах Google. Затем прочитайте сообщение об отправке сообщения. После того, как вы все это поняли, было бы довольно просто отправить сообщение из script, в фоновом режиме и в script другой вкладки.