I have a login window that I open as a Chrome installed Extension (will be a stand-alone chrome web app, so I use the manifest.json to setup the .js file which then opens the little login window.
I want it so that when the user enters correct credentials, and clicks login, I can then open the main application window.
My login window opens fine, but can’t get the next window to open. I’m sure this has something to do with sandboxing, but I don’t know where I’m going wrong.
Here’s my code for each so far, w/o CSS.
manifest.json
{
"name": "CAD",
"description": "A CAD Call Sheet",
"manifest_version": 2,
"minimum_chrome_version": "23",
"version": "0.1",
"offline_enabled": true,
"app": {
"background": {
"scripts": ["mainInfo.js"]
}
},
"icons": {
"16": "assets/icon-128x128.png",
"128": "assets/icon-128x128.png"
}
}
mainInfo.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('CADLogin.html', {
width: 250,
height: 250,
maxWidth: 250,
minWidth: 250,
minHeight: 250,
maxHeight: 250,
});
});
CADLogin.html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel='stylesheet' href="CADLogin.css" type='text/css' />
<script type="text/javascript" src="CADLogin.js"></script>
</head>
<body>
<header>
<h1 class="loginHeader">CAD Login</h1>
</header>
<form id="loginForm">
<br />
<div id="loginUsernamediv">
<input class="loginFields" type="text" id="loginUsername" name="loginUsername" placeholder="Username" />
</div>
<div id="loginPassworddiv">
<input class="loginFields" type="password" id="loginPassword" name="loginPassword" placeholder="Password" />
</div>
<br />
<div id="loginButtonsdiv">
<button class="loginButton" id="loginButton">
Login
</button>
<button class="loginButton" id="cancelButton">
Cancel
</button>
</div>
<br />
<br />
</form>
</body>
</html>
CADLogin.js
window.onload = function() {
document.getElementById("cancelButton").onclick = function() {
window.close();
}
document.getElementById("loginButton").onclick = function() {
var username = document.getElementById("loginUsername");
var password = document.getElementById("loginPassword");
if (username=="brian" && password=="letmein") {
chrome.app.window.create('MainSelections.html', {
width: 100,
height: 250,
maxWidth: 100,
minWidth: 100,
minHeight: 250,
maxHeight: 250
});
}
}
}
Any help is appreciated.
Ok, so checking for Typos in my code helps. texxt/javascript and text/javascript aren’t the same…and the first will actually make the code not work.