I am creating my first chrome extension and I am relatively very new to it.
My extension looks like this:
Manifest.json
{
"name": "Screen Compare",
"description": "Screen Compare",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<div id="loginConatiner">
<table>
<tr>
<td>
Username:
</td>
<td>
<input id="txtUsername" type="text" placeholder="Username"/>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input id="txtPassword" type="password" placeholder="Password"/>
</td>
</tr>
<tr>
<td>
<input id="btnLogin" type="button" value="Sign In"/>
</td>
<td>
</td>
</tr>
</table>
</div>
<div id="applicationsContainer">
<table>
<tr>
<td>
Applications:
</td>
<td>
<select id="currentApplications"></select>
</td>
</tr>
</table>
</div>
</body>
</html>
popup.js
var currentApplications = [];
function login(e) {
var username = document.getElementById('txtUsername');
var password = document.getElementById('txtPassword');
console.log(username.value);
console.log(password.value);
var xhr = new XMLHttpRequest();
xhr.open('GET', 'url to load my applications', true);
xhr.setRequestHeader("Authorization", "Basic " + btoa(username.value + ":" + password.value));
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log(xhr.responseText);
currentApplications = JSON.parse(xhr.responseText);
console.log(currentApplications.applications.length);
var applicationsContainer = document.getElementById('applicationsContainer');
if(applicationsContainer){
applicationsContainer.style.display = 'block';
}
var loginConatiner = document.getElementById('loginConatiner');
if(loginConatiner){
loginConatiner.style.display = 'none';
}
var applicationsDropdown = document.getElementById('currentApplications');
if(applicationsDropdown){
for(var i =0, count = currentApplications.applications.length; i < count; i++){
var option = document.createElement("option");
option.text = currentApplications.applications[i].name;
option.value = currentApplications.applications[i].id;
applicationsDropdown.add(option);
}
}
}
};
xhr.send();
}
document.addEventListener('DOMContentLoaded', function () {
var applicationsContainer = document.getElementById('applicationsContainer');
if(applicationsContainer){
applicationsContainer.style.display = 'none';
}
var loginButton = document.getElementById('btnLogin');
loginButton.addEventListener('click', login);
});
when user clicks on addon icon in browser, a login form will be displayed. On successful login I hide the loginContianer div and display the applicationsContainer div with loaded application.
When the popup is closed and open again, I again see the login page. I am not able to persist the ui.
I am feel some where I am not utilizing the architecture properly, Kindly guide me.
