Fetch Api Does Not Work In Webextensions

I'm experimenting firefox webextensions. I'd like to make HTTP requests using the fetch API after submitting a form. The problem is that the fetch request is not doing anything. H

Solution 1:

When an input of type submit is clicked, this causes a submit: since no other URL is specified, and no other form elements are there, the page is basically reloaded. Quoting MDN:

<input> elements of type "submit" are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

Your fetch-based solution is fully asynchronous, which means your code starts, but is interrupted by the reload before it is complete.

Your XHR-based solution succeeds, since you invoke a synchronous form of XHR (with false); the reload is stalled until your code finishes, then it still reloads.

You don't want a reload anyway, which destroys your JS state; you could prevent it by calling e.preventDefault() from the handler, but semantically it's more correct not to use a submit button instead of doing brain surgery on its semantics.

Using <input type="button"> (or better yet, <button>) would be the right (and cleaner) approach. Quoting MDN:

<input type="submit"> buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <input type="button">, or better still, a <button> element.