创建基本的应用

每一个 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 并单击“检查视图”。

  1. 在 index.html 中将“Hello world”文本更改为“我的第一个应用”

  2. 修改 main.js 后台脚本，创建两个而不是一个窗口。不用担心要创建另一个 HTML 文件，目前您可以在两个窗口中都打开 index.html。

  3. 修改代码后，右键单击您的应用，并单击重新加载应用，以便重新加载更改的文件。当您重新加载您的应用时，所有开发者工具窗口都会重新打开。

  4. 在“打开新的标签页”页面中运行应用，移动顶端的窗口，您就会看到后面的第二个窗口。

更多信息

  • Chrome 应用包含三个基本部分。第一个同时也是最重要的是清单文件，用来描述您的应用、请求特殊的权限、定义重要的元信息等等。第二个部分是后台脚本，包含与具体用户界面无关的所有逻辑。最后一部分是用户界面：与界面相关的 HTML、CSS、JavaScript、图片等。
  • Chrome 应用可以像标准网页一样使用 Chrome 浏览器的开发者工具调试，但是由于应用没有浏览器的“重新加载”控件，当您以开发者模式运行时会新增一个“重新加载应用”的选项。

您还应该阅读

接下来做什么？

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