How do i access raw data response from a form post in a firefox addon?

Question

I am trying to build a firefox addon where the user fills out a form and submits it to a server. I would like to know how to access the response back from the server. In this example the response is ["SUCCESS", "createAccount"]

I see the data in this little popup that appears after I click submit, in the Raw Data tab. (see picture).

I just don't know how to access that from my code. This seems like it should be simple but I cannot figure it out.

I have tried overriding the onsubmit and onclick methods/listeners to route them through an ajax/XMLHttpRequest, but I get a content security error (Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: onclick attribute on BUTTON element.)

I have looked at other SO posts, none of them are specifically for responses from forms in an addon.

Any help is appreciated.

Answer 1

The answer is to use webRequests.filterResponseData.

The code goes something like this:

    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"]);
      

rawdata will then have the correct values. Thanks to icecub for pointing the right way.

arrayBufferToData comes from here

Unfortunately this only works for firefox, not chrome.