XMLHttpRequest problem in Firefox extension

Question

I'm developing a Firefox extension that asks the user for credentials, and I'm facing a strange problem. Depending on where in the code I place the .send call, the code performs the network request or not.

Here is the manifest.json (the hostname and domain have been replaced by a fake one):

{
  "applications": {
    "gecko": {
      "id": "[email protected]",
      "strict_min_version": "58.0a1"
    }
  },
  "browser_action": {
    "browser_style": true,
    "default_title": "Title",
    "default_popup": "mowl.html"
  },
  "description": "Description",
  "homepage_url": "https://example.com",
  "manifest_version": 2,
  "name": "Name",
  "permissions": [
    "*://www.example.com/*",
    "tabs"
  ],
  "content_security_policy": "script-src 'self' https://www.example.com; object-src 'self'",
  "version": "1.0"
}

This is the HTML popup file:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<script src="mowl.js"></script>
</head>

<body>
  Please login: <br><br>
  <input type='email' placeholder='Email address:'' name='email' id='email' size='50'><br><br>
  <input type='password' placeholder='Password' name='password' id='password' size='50'><br><br>
  <button id="signin">Ok</button>
</body>

</html>

And finally, the javascript code:

function processlogin() {
  console.log('in processlogin');
  if(http.readyState == 4) {
      console.log(http.readyState);
  }
}

function buttonClicked() {
   document.querySelector('#signin').addEventListener('click', dologin, false);
}

function dologin () {
  console.log('in dologin');
  var website = "https://www.example.com/signin.php";
  var params = "email=" + document.getElementById('email').value + "&password=" + document.getElementById('password').value;
  http.open("POST", website);
  http.responseType = 'text';
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.onreadystatechange = processlogin;
  http.send(params);
}

document.addEventListener("DOMContentLoaded", buttonClicked);
var http = new XMLHttpRequest();

Testing that code in Firefox with the debugger shows that not network request is performed at all when the button is clicked. I've placed console.log statements in different places to verify that the different functions are called when expected.

But, modifying the javascript this way:

function processlogin() {
  console.log('in processlogin');
  if(http.readyState == 4) {
      console.log(http.readyState);
  }
}

function buttonClicked() {
   document.querySelector('#signin').addEventListener('click', dologin, false);
}

function dologin () {
  console.log('in dologin');
}

document.addEventListener("DOMContentLoaded", buttonClicked);
var http = new XMLHttpRequest();
var website = "https://www.example.com/signin.php";
var params = "email=" + document.getElementById('email').value + "&password=" + document.getElementById('password').value;
http.open("POST", website);
http.responseType = 'text';
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = processlogin;
http.send(params);

makes the network call being performed (obviously without having to click on the button) and reported in the Firefox debugger. I don't understand what is happening.

Someone can please provide me some guidance on what I'm doing wrong with this?

Thanks a lot!

Do you get the "In dologin" message when you click the button in the second version? — Barmar
@Barmar: Yes. I get the dologin message in the second version. — med

med med · Accepted Answer · 2019-01-04T14:57:17

Turns out that the network requests ARE being done no matter if the code is inside or outside a function. BUT for whatever the reason, Firefox debugger is NOT showing the network calls when they are inside a function!!! or maybe the output is cleared before being able to be seen, who knows…

XMLHttpRequest problem in Firefox extension

1 Answers