I am in the process of developing a Chrome extension popup for logging into my server. The popup contains a simple form with fields for 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>
To verify my server's response, I used the Insomnia REST client with the following details:
URL: https://myserver.com/login
Header:
Content-Type: application/x-www-form-urlencodedForm URL Encoded:
email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ece4e8e0e5c9ede6e4e8e0e7a7eae6e4">[email protected]</a> & password: passwordIn the Chrome extension, I created a script named signin.js to handle the button click event and send the request to the server.
// hardcoded for simplicity of this example
const email = <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d38303c34311d3932303c3433733e3230">[email protected]</a>
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!");
}
}
});
In the manifest.json file, I specified the necessary permissions as follows:
"permissions": [
"storage",
"activeTab",
"cookies",
"*://*.myserver.com/*"
],
The extension is loading and running without any errors, but I am unable to view the request on the network tab in DevTools. Although all files are loaded successfully, there seems to be no request to myserver.com.
The requested URL appears as
Request URL: chrome-extension://ahlfehecmmmgbnpbfbokojepnogmajni/sign_in.html?