本教程将指导您创建您的第一个 Chrome 应用。Chrome 应用的结构类似 以便当前开发者能够识别清单和打包方法。如果您 只需生成包含代码和资源的 ZIP 文件,即可发布您的 应用。
Chrome 应用包含以下组件:
- 清单可向 Chrome 说明您的应用及其内容、启动方式以及其他内容 所需权限
- 后台脚本用于创建负责管理应用生命周期的事件页面 循环。
- 所有代码都必须包含在 Chrome 应用软件包中。包括 HTML、JS、CSS 和 Native Client 模块。
- 应用包中还必须包含所有图标和其他素材资源。
第 1 步:创建清单
首先,创建 manifest.json
文件(格式:清单文件对此清单进行了说明
详情):
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
第 2 步:创建后台脚本
接下来,创建一个名为 background.js
且包含以下内容的新文件:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
在上述示例代码中,用户启动应用时会触发 onLaunched 事件。它 则会立即为应用打开指定宽度和高度的窗口。您的背景 脚本可能包含其他监听器、窗口、POST 消息和启动数据,所有这些都是 供活动页面用来管理应用。
第 3 步:创建窗口页面
创建 window.html
文件:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
第 4 步:创建图标
将这些图标复制到您的应用文件夹中:
第 5 步:启动应用
启用标志
许多 Chrome 应用 API 仍处在实验阶段,因此,您应启用实验性 API, 您可以尝试以下方法:
- 转到 chrome://flags。
- 找到“实验性扩展程序 API”,然后点击“启用”链接。
- 重启 Chrome。
加载应用
要加载您的应用,请点击 Chrome 设置图标,打开应用和扩展程序管理页面 然后依次选择工具 >扩展程序。
确保已选中开发者模式复选框。
点击加载已解压的扩展程序按钮,转到应用的文件夹,然后点击确定。
打开新标签页并启动
加载应用后,打开新标签页并点击新应用图标。
或者,从命令行加载和启动
Chrome 的以下命令行选项可帮助您执行迭代:
--load-and-launch-app=/path/to/app/
会从指定路径安装解压缩的应用,以及 启动容器如果应用已在运行,系统会用更新后的内容重新加载该应用。--app-id=ajjhbohkjpincjgiieeomimlgnll
会启动已加载到 Chrome 中的应用。它不会 但它会启动新应用,其中包含更新后的内容。