Search code examples
eventscallbackgoogle-chrome-applisteners

Converting working system to a chrome App

After hitting some of the limitations in a standard browser based application, I decided to convert it to a chrome App that doesn't use the browser.

Below are all the relevant parts. The problem I'm trying to solve is to add a load listener for a button that was working in the browser and doesn't work under the app architecture.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>POS Data Entry Sheet</title>
<link href="./POS.css" rel="stylesheet" type="text/css" />
<script src="./POS.js"></script>
<script src="./POS.underDevelopment.js"></script>
<script src="./POS.generateTable.js"></script>
<script src="./POS.menu.js"></script>
<script src="./POS.portion.js"></script>
<script src="./POS.formula.js"></script>
<script src="./POS.dialog.js"></script>
</head>

<body>
<script>
   addLoadListener(addHandlerForLoginButton);
</script>

<section id="login">
<h1>Please login:</h1>

<p>
   <label>User ID:</label><input type="text" id="userID">
   <label>Password:</label><input type="password" id="password">
   <button type="submit" id="loginButton">Login</button>
</p>
</section>

<div id="main"></div>  <!--Everything gets attached to this div.-->

</body>
</html>

Everything above works via the browser. I created the manifest:

{
  "name": "Point of Sale System",
  "description": "Dual currency Point of Sale System",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["POS.dialog.js",
                  "POS.formula.js",
                  "POS.generateTable.js",
                  "POS.js",
                  "POS.menu.js",
                  "POS.portion.js",
                  "POS.underDevelopment.js",
                  "background.js"]
    }
  }
}

This is my first attempt at the background.js It brings up the rudimentary page, but the in line script wasn't working.

chrome.app.runtime.onLaunched.addListener(function() {
   chrome.app.window.create('POS.html', {
      'bounds': {
      'width': screen.availWidth,
      'height': screen.availHeight
      }
   });
});

So, I commented out the inline script and attempted to add a callback function This also doesn't work. No event listeners are recorded as per the debug tool.

chrome.app.runtime.onLaunched.addListener(function() {
   chrome.app.window.create('POS.html', {
      'bounds': {
      'width': screen.availWidth,
      'height': screen.availHeight
      }
   }, function(win) {win.addEventListener('load', addHandlerForLoginButton, false);});
});

I'm at a loss after several hours of attempting everything I could think of. Why doesn't the original in line script work, and why doesn't the callback work in the Chrome App architecture?

Solution

  • I think you are running into CSP problems, which does not allow inline script or script blocks. See http://developer.chrome.com/apps/contentSecurityPolicy.html for details.

    You should be able to convert your first attempt by simply creating a page.js file, including it via a script src='page.js' tag, and put the contents of your script block in it:

    addLoadListener(addHandlerForLoginButton);

    Your second versoin didn't work because the win parameter to your callback isn't a DOM window but is an AppWindow. It has a DOM window attached via the contentWindow attribute, see http://developer.chrome.com/apps/app_window.html#type-AppWindow for details.

    Lastly, you don't need to list all of those scripts in the app.background.scripts field of the manifest, only the background script background.js. The others will be loaded as needed when you open your page.