将工作系统转换为Chrome应用程序

在基于标准浏览器的应用程序中遇到一些限制后，我决定将其转换为不使用浏览器的Chrome应用程序。将工作系统转换为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);}); 
});

经过几个小时的尝试我能想到的所有事情之后，我不知所措。为什么原始内嵌脚本无法工作，为什么回调在Chrome应用程序架构中不起作用？

来源

2013-08-04 Bill Gradwohl

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

您应该能够通过简单地创建一个page.js文件，包括它通过script src='page.js'标记您的第一次尝试转换，并把你的脚本块的内容吧：

addLoadListener(addHandlerForLoginButton);

你的第二个versoin没” t工作，因为回调的win参数不是DOM窗口，而是AppWindow。它具有通过contentWindow属性附加的DOM窗口，详情请参阅http://developer.chrome.com/apps/app_window.html#type-AppWindow。

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

来源

2013-08-05 09:59:57

我读过关于没有内联脚本的内容，但他们的例子使用它们，所以我认为这些文档只是在时代背后，我可能会摆脱它。如果这样做不起作用，我会将内联注释掉，然后尝试另一种方法。谢谢你指出我认为是一个窗口，不是。我尝试枚举AppWindow的属性并没有得到任何东西。我确实必须在清单中包含一个.js文件，因为这是addHandlerForLoginButton所在的位置。我知道我可以省略其余部分，但为了安全起见，我只包括了一切，以防需要它们。 –

将工作系统转换为Chrome应用程序

回答

相关问题