创建您的第一个应用

本教程将引导您创建您的第一个 Chrome 应用。Chrome 应用的结构与扩展程序类似,因此当前开发者能够识别清单和打包方法。完成后,您只需生成一个包含代码和资源的 ZIP 文件,即可publish您的应用。

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 事件。然后,该事件会立即为具有指定宽度和高度的应用打开一个窗口。您的后台脚本可能包含其他监听器、窗口、发布消息和启动数据,事件页面会使用所有这些这些内容来管理应用。

第 3 步:创建窗口页面

创建 window.html 文件:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

第 4 步:创建图标

将以下图标复制到您的应用文件夹:

第 5 步:启动应用

启用标志

许多 Chrome Apps API 仍处于实验阶段,因此您应启用实验性 API 以便进行试用:

  • 转到 chrome://flags
  • 找到“实验性扩展程序 API”,然后点击其“启用”链接。
  • 重启 Chrome。

加载应用

如需加载您的应用,请点击 Chrome 设置图标,然后依次选择 Tools > Extensions,打开应用和扩展程序管理页面。

确保开发者模式复选框处于选中状态。

点击 Load unpacked extension(加载解压缩的扩展程序)按钮,导航到应用的文件夹,然后点击 OK(确定)。

打开新标签页并启动

应用加载完毕后,打开新标签页,然后点击新应用图标。

或者,通过命令行加载并启动

Chrome 的以下命令行选项可能有助于您进行迭代:

  • --load-and-launch-app=/path/to/app/ 从给定路径安装已解压缩的应用,并启动该应用。如果应用已在运行,系统会重新加载更新后的内容。
  • --app-id=ajjhbohkjpincjgiieeomimlgnll 会启动已加载到 Chrome 中的应用。它不会重启之前运行的任何应用,但会启动包含更新内容的新应用。