创建清单文件
创建后台脚本
创建视图
安装并运行示例应用
调试、修复问题和重新加载
更多信息
您还应该阅读
接下来做什么？

创建基本的应用

每一个 Chrome 应用都包含三个核心部分：

清单文件描述有关您的应用的元信息：名称、描述、版本号以及如何运行您的应用
后台脚本设置您的应用响应系统事件的方式，例如用户安装和运行应用以及系统将它关闭
视图（是可选的，但通常您需要向用户显示一些内容）

让我们从最简单的层面看看每一个部分：

提示：如果您在 Sublime 文本编辑器中使用我们的插件，您只要单击一下（Chrome -> New App -> Hello World）就能创建这三个文件。

创建清单文件

在一个空目录（让我们称之为 <myappdir>）中创建清单文件：manifest.json

{
  "manifest_version": 2,
  "name": "My first app",
  "version": "1",
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  }
}

创建后台脚本

在同一个目录中创建后台脚本：main.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    bounds: {
      width: 500,
      height: 309
    }
  });
});

创建视图

创建用户界面：index.html

<html>
  <head>
      <meta charset="utf-8">
      <title>Hello World</title>
  </head>
  <body>
      <h1>Hello, World!</h1>
  </body>
</html>

安装并运行示例应用

进入 chrome://extensions。
加载正在开发的扩展程序...
选择 <myappdir> 目录。
打开一个新的 Chrome 浏览器标签页。
单击“My First App”图标。

调试、修复问题和重新加载

提示：如果您在 chrome://extensions 中启用了开发者模式，您可以使用 Chrome 浏览器的开发者工具审查和调试应用，就像标准网页一样，右键单击网页并选择“审查元素”。对于没有用户界面的后台网页，您既可以右键单击应用窗口并选择“检查背景页”，也可以进入 chrome://extensions 并单击“检查视图”。

在 index.html 中将“Hello world”文本更改为“我的第一个应用”
修改 main.js 后台脚本，创建两个而不是一个窗口。不用担心要创建另一个 HTML 文件，目前您可以在两个窗口中都打开 index.html。
修改代码后，右键单击您的应用，并单击重新加载应用，以便重新加载更改的文件。当您重新加载您的应用时，所有开发者工具窗口都会重新打开。
在“打开新的标签页”页面中运行应用，移动顶端的窗口，您就会看到后面的第二个窗口。

您还应该阅读

接下来做什么？

在 3 - 创建 MVC 中，您会使用纯 JavaScript 或 AngularJS 建立您的应用的模型、视图和控制器。