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": "extension@example.com",
"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!