将工作系统转换为 chrome 应用程序答案

【问题标题】：Converting working system to a chrome App将工作系统转换为 chrome 应用程序
【发布时间】：2013-08-05 12:09:22
【问题描述】：

在基于标准浏览器的应用程序中遇到一些限制后，我决定将其转换为不使用浏览器的 chrome 应用程序。

以下是所有相关部分。我要解决的问题是为在浏览器中工作但在应用架构下不起作用的按钮添加负载侦听器。

<!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>

以上所有内容都通过浏览器运行。我创建了清单：

{
  "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"]
    }
  }
}

这是我第一次尝试 background.js 它打开了基本页面，但内嵌脚本不起作用。

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

所以，我注释掉了内联脚本并尝试添加一个回调函数这也行不通。调试工具不会记录任何事件监听器。

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);});
});

在尝试了我能想到的一切数小时后，我不知所措。为什么原来的 in line 脚本不起作用，为什么回调在 Chrome App 架构中不起作用？

【问题讨论】：

标签： events callback google-chrome-app listeners

【解决方案1】：

我认为您遇到了 CSP 问题，它不允许内联脚本或脚本块。详情请见http://developer.chrome.com/apps/contentSecurityPolicy.html。

您应该能够通过简单地创建一个page.js 文件（通过script src='page.js' 标记包含它）来转换您的第一次尝试，并将您的脚本块的内容放入其中：

addLoadListener(addHandlerForLoginButton);

您的第二个版本不起作用，因为回调的 win 参数不是 DOM 窗口，而是 AppWindow。它有一个通过 contentWindow 属性附加的 DOM 窗口，有关详细信息，请参阅 http://developer.chrome.com/apps/app_window.html#type-AppWindow。

最后，您不需要在清单的app.background.scripts 字段中列出所有这些脚本，只需在后台脚本background.js 中列出。其他的将在您打开页面时根据需要加载。

【讨论】：

我读到没有内联脚本，但他们的示例使用了它们，所以我认为这些文档只是落后于时代，我可能会侥幸逃脱。当这不起作用时，我确实注释掉了内联并尝试了另一种方法。谢谢你指出我认为是窗户的东西，不是。我尝试枚举 AppWindow 的属性，但一无所获。我确实必须在清单中包含我的 .js 文件之一，因为这是 addHandlerForLoginButton 所在的位置。我知道我可以省略其余部分，但我将所有内容都包括在内，以防万一出于安全原因需要它们。