Отправить запрос POST от Chrome Extension

Question

Я пишу всплывающее окно расширения Chrome для входа на мой сервер. Расширение имеет базовую форму с кнопками username, password и submit.

<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>

Я проверил ответ моего сервера с клиентом Insomnia REST следующим образом:

URL: https://myserver.com/login
Заголовок: Content-Type: application/x-www-form-urlencoded
Закодированный URL формы: email: email@domain.com & password: password

В своем расширении Chrome я написал скрипт signin.js для обработки события нажатия кнопки и отправки запроса на мой сервер.

// hardcoded for simplicity of this example
const email = email@domain.com
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!");
        }
    }
});

Тогда для моего manifest.json файла у меня есть следующие разрешения:

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

Расширение загружается и работает без ошибок, но я не вижу запроса на вкладке сети DevTools. Я вижу, что все файлы загружены, но нет запроса на myserver.com
Запрашиваемый URL-адрес Request URL: chrome-extension://ahlfehecmmmgbnpbfbokojepnogmajni/sign_in.html?

Answer 1

Так что после некоторого копания я понял, что форма перезагружает всплывающее окно после нажатия кнопки отправки, таким образом, оно обновлялось до того, как у меня появилась возможность увидеть запрос.
В качестве решения мне пришлось отключитьмеханизм перезагрузки, отредактировав мою функцию следующим образом:

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!");
        }
    }
});

Теперь он работает как положено.