在此步骤中，您将学习以下内容：
- Chrome 应用的基本构建块，包括清单文件和后台脚本。
- 如何安装、运行和调试 Chrome 应用。
完成此步骤的预计用时：10 分钟。
如需预览您将在此步骤中完成的内容，请跳至本页面底部 ↓。
熟悉 Chrome 应用
Chrome 应用包含以下组件：
- 清单指定应用的元信息。清单会告知 Chrome 有关应用的信息、启动方式以及应用需要的任何其他权限。
- 事件页面（也称为后台脚本）负责管理应用的生命周期。通过后台脚本，您可以为特定应用事件（例如应用窗口的启动和关闭）注册监听器。
- 所有代码文件都必须打包到 Chrome 应用中，其中包括 HTML、CSS、JS 和 Native Client 模块。
- 资源（包括应用图标）也应打包到 Chrome 应用中。
创建清单
打开您偏好的代码/文本编辑器，然后创建以下名为 manifest.json 的文件：
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
请注意此清单是如何描述名为 background.js 的后台脚本的。接下来，您将创建该文件。
"background": {
"scripts": ["background.js"]
}
我们会在此步骤的后面为您提供一个应用图标：
"icons": {
"128": "icon_128.png"
},
创建后台脚本
创建以下文件并将其保存为 background.js：
/**
* Listens for the app launching then creates the window
*
* @see /apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
此后台脚本只是等待应用的 chrome.app.runtime.onLaunched 启动事件，并执行回调函数：
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
Chrome 应用启动后，chrome.app.window.create() 会以一个基本 HTML 页面 (index.html) 为来源创建一个新窗口。您将在下一步中创建 HTML 视图。
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
后台脚本可以包含其他监听器、窗口、发布消息和启动数据，所有这些内容都供事件页面用于管理应用。
创建 HTML 视图
创建一个简单的网页以在屏幕上显示“Hello World”消息，并将其另存为 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
与任何其他网页一样，您可以在此 HTML 文件中添加其他已打包的 JavaScript、CSS 或资源。
添加应用图标
右键点击这张 128x128 的图片并将其作为 _icon128.png 保存到项目文件夹中：
您将使用此 PNG 作为应用在启动菜单中看到的图标。
确认您已创建所有文件
您的项目文件夹中现在应该有这 4 个文件：
在开发者模式下安装 Chrome 应用
使用开发者模式可以快速加载和启动应用，而无需最终将应用设置为分发软件包。
- 通过 Chrome 多功能框访问 chrome://extensions。
- 取消选中开发者模式复选框。
- 点击加载已解压的扩展程序。
- 使用文件选择器对话框，转到应用的项目文件夹，然后选择该文件夹以加载应用。
启动已完成的 Hello World 应用
将项目作为解压缩的扩展程序加载后，点击已安装应用旁边的启动。系统应该会打开一个一个新的独立窗口：
恭喜，您刚刚创建了一个新的 Chrome 应用！
使用 Chrome 开发者工具调试 Chrome 应用
您可以使用 Chrome 开发者工具检查、调试、审核和测试应用，就像在常规网页上执行操作一样。
更改代码并重新加载应用（右键点击 > 重新加载应用）后，检查开发者工具控制台是否存在任何错误（点击右键点击 > 检查元素）。
（我们将在带提醒功能的第 3 步中介绍检查后台网页选项。）
开发者工具 JavaScript 控制台可以访问您的应用可用的相同 API。您可以先轻松测试 API 调用，然后再将其添加到代码中：
更多信息
如需详细了解此步骤中引入的一些 API，请参阅：
准备好继续下一步了吗？转到第 2 步 - 导入现有的网络应用 »