如何从 Firefox 插件中的表单帖子访问原始数据响应？答案

【问题标题】：How do i access raw data response from a form post in a firefox addon?如何从 Firefox 插件中的表单帖子访问原始数据响应？
【发布时间】：2018-07-03 02:34:29
【问题描述】：

我正在尝试构建一个 Firefox 插件，用户可以在其中填写表单并将其提交到服务器。我想知道如何从服务器访问响应。在这个例子中，响应是 ["SUCCESS", "createAccount"]

我在“原始数据”选项卡中单击“提交”后出现的这个小弹出窗口中看到了数据。（见图）。

我只是不知道如何从我的代码中访问它。这看起来应该很简单，但我想不通。

我已尝试覆盖 onsubmit 和 onclick 方法/侦听器以通过 ajax/XMLHttpRequest 路由它们，但我收到内容安全错误（内容安全策略：页面的设置阻止了自行加载资源（ “script-src”）。来源：BUTTON 元素上的 onclick 属性。）

我查看了其他 SO 帖子，它们都不是专门针对插件中表单的响应。

感谢任何帮助。

【问题讨论】：

我不熟悉插件开发，但您正在查看的内容称为“响应标头”。要对它们做点什么，您可能正在寻找webRequest API，更具体地说是onHeadersReceived 方法。我知道这不是您要寻找的答案，但也许这会为您指明正确的方向。
onClick within Chrome Extension not working
@icecub 确实有帮助。它把我带到了developer.mozilla.org/en-US/Add-ons/WebExtensions/API/…，不幸的是它只适用于firefox，我也需要它适用于chrome。

标签： javascript google-chrome-extension firefox-addon http-post form-submit

【解决方案1】：

答案是使用webRequests.filterResponseData。

代码如下：

    var rawdata;
    var listener = function(result){
      let filter = chrome.webRequest.filterResponseData(result.requestId);  //https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/webRequest/filterResponseData
      filter.ondata = event => {
      self.data = {
          data: Array.apply(null, new Uint8Array(event.data)),

          contentType: result.type
      };
      rawdata = arrayBufferToData.toJSON(event.data);  

      }
       filter.onstop = event => {
       filter.disconnect();
      }

    }
  browser.webRequest.onHeadersReceived.addListener(listener, {urls: ["<all_urls>"]},["blocking"]);

然后原始数据将具有正确的值。感谢icecub指出正确的方式。

arrayBufferToData 来自here

不幸的是，这只适用于 Firefox，不适用于 chrome。

【讨论】：