This page was saved using WebZIP 7.0.3.1030 offline browser on 12/24/13 11:31:37.
Address: https://crxdoc-zh.appspot.com/apps/first_app.html
Title: 创建您的第一个应用 - Google Chrome 应用开发文档(非官方中文版)  •  Size: 26279

创建您的第一个应用

该教程引导您创建您的第一个 Chrome 应用。Chrome 应用在结构上与扩展程序类似,所以目前的开发人员会发现熟悉的清单文件与打包方式。当您完成后,您只需要为您的代码与其他资源产生一个 zip 文件,以便发布您的应用。

Chrome 应用包含这些组成部分:

API 示例:想试试这些代码吗?请参见 hello-world 示例。

第一步:创建清单文件

首先创建您的 manifest.json 文件(格式:清单文件详细描述了该清单文件):

{
  "name": "Hello World!",
  "description": "我的第一个 Chrome 应用。",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

重要提示:Chrome 应用必须使用清单文件版本 2

第二步:创建后台脚本

接着创建一个新文件 background.js,包含如下内容:

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

在以上示例代码中,onLaunched 事件将会在用户启动应用时产生,接着它立刻为应用打开一个指定宽度与高度的窗口。您的后台脚本可以包含额外的监听器、窗口、传递消息及执行数据,这些都由事件页面使用,以管理应用。

第三步:创建窗口页面

创建您的 window.html 文件:

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

第四步:创建图标

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

第五步:执行您的应用

启用标志

许多 Chrome 应用的 API 仍然是实验性的,所以您应该启用实验性 API 以便尝试使用它们:

加载您的应用

要加载应用,请单击设置图标 ,选择工具 > 扩展程序,打开应用和扩展程序管理页面。

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

单击加载正在开发的扩展程序按钮,浏览至您的应用文件夹并单击确定

打开新标签页并运行

一旦您加载了您的应用,请打开一个“打开新的标签页”页面,并单击您的新应用图标。

或者从命令行加载并运行

Chrome 浏览器的这些命令行选项可能会对您有帮助: