创建您的第一个应用

本教程将指导您创建您的第一个 Chrome 应用。Chrome 应用的结构类似 以便当前开发者能够识别清单和打包方法。如果您 只需生成包含代码和资源的 ZIP 文件,即可发布您的 应用。

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 事件。它 则会立即为应用打开指定宽度和高度的窗口。您的背景 脚本可能包含其他监听器、窗口、POST 消息和启动数据,所有这些都是 供活动页面用来管理应用。

第 3 步:创建窗口页面

创建 window.html 文件:

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

第 4 步:创建图标

将这些图标复制到您的应用文件夹中:

第 5 步:启动应用

启用标志

许多 Chrome 应用 API 仍处在实验阶段,因此,您应启用实验性 API, 您可以尝试以下方法:

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

加载应用

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

确保已选中开发者模式复选框。

点击加载已解压的扩展程序按钮,转到应用的文件夹,然后点击确定

打开新标签页并启动

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

或者,从命令行加载和启动

Chrome 的以下命令行选项可帮助您执行迭代:

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