Send POST request from Chrome Extension

Question

I'm writing a Chrome extension popup to login to my server. The extension has a basic form with username, password, and a submit button.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
           placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary btn-sm" id="loginButton">Log In</button>
</form>

I tested my server's response with Insomnia REST client with the following:

URL: https://myserver.com/login
Header: Content-Type: application/x-www-form-urlencoded
Form URL Encoded: email: [email protected] & password: password

On my Chrome extension, I wrote a signin.js script to handle the button click event and send the request to my server.

// hardcoded for simplicity of this example
const email = [email protected]
const pwd = password

var button = document.getElementById("loginButton");

button.addEventListener("click", function(){
    const req = new XMLHttpRequest();
    const baseUrl = "https://myserver.com/login";
    const urlParams = `email=${email}&password=${pwd}`;

    req.open("POST", baseUrl, true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send(urlParams);

    req.onreadystatechange = function() { // Call a function when the state changes.
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            console.log("Got response 200!");
        }
    }
});

Then on my manifest.json file, I have the following permissions:

"permissions": [
    "storage",
    "activeTab",
    "cookies",
    "*://*.myserver.com/*"
  ],

The extension loads and runs with no errors, but I cannot see the request on the network tab on DevTools. I can see that all the files are loaded, but no request to myserver.com
The requested URL is Request URL: chrome-extension://ahlfehecmmmgbnpbfbokojepnogmajni/sign_in.html?

Answer 1

So after some digging, I figured out that the form reloads the popup after the submit button is hit, thus, it was refreshing before I had a chance to see the request.
As a solution, I had to disable the reloading mechanism by editing my function as follows:

button.addEventListener("click", function(e){
    e.preventDefault();

    const req = new XMLHttpRequest();
    const baseUrl = "https://myserver.com/login";
    const urlParams = `email=${email}&password=${pwd}`;

    req.open("POST", baseUrl, true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send(urlParams);

    req.onreadystatechange = function() { // Call a function when the state changes.
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            console.log("Got response 200!");
        }
    }
});

Now it works as intended.