在此步骤中，您将学习以下内容：
- Chrome 应用的基本构建块，包括清单文件和后台脚本。
- 如何安装、运行和调试 Chrome 应用。
完成此步骤的预计用时：10 分钟。
若要预览您将在此步骤中完成的内容，请跳转到本页底部 ↓。
熟悉 Chrome 应用
Chrome 应用包含以下组件：
- manifest 指定了应用的元信息。该清单会告知 Chrome 如何启动它，以及它需要的任何额外权限。
- 事件页面（也称为“后台脚本”）用于管理应用生命周期 循环。在后台脚本中注册特定应用事件（例如 启动和关闭应用窗口的操作。
- 所有代码文件都必须打包到 Chrome 应用中。这包括 HTML、CSS、JS 和 Native 客户端模块。
- 资源（包括应用图标）也应打包到 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 }
});
后台脚本可能包含额外的监听器、窗口、POST 消息和启动数据。 供活动页面用来管理应用
创建 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 应用
将项目作为未封装的扩展程序加载后，点击已安装的应用旁边的 Launch。答 新的独立式窗口应该会打开：
恭喜，您刚刚创建了一个新的 Chrome 应用！
使用 Chrome 开发者工具调试 Chrome 应用
您可以使用 Chrome 开发者工具检查、调试、审核和测试应用，就像 与在常规网页上执行的操作相同
更改代码并重新加载应用后（右键点击 > 重新加载应用），检查 开发者工具控制台（右键点击 > 审查元素）。
（我们将在第 3 步中利用闹钟介绍检查后台网页选项。）
开发者工具 JavaScript 控制台可以访问您的应用可用的相同 API。你可以轻松 在将 API 调用添加到代码之前对其进行测试：
了解详情
如需详细了解此步骤中引入的一些 API，请参阅：
准备好继续下一步了吗？转到第 2 步 - 导入现有 Web 应用 »