如何创建第一个Chrome App

来源：互联网发布：福昕阅读器mac版下载编辑：程序博客网时间：2024/04/30 12:46

本教程旨在指导你完成第一个打包应用(packaged app)。Packaged app的结构与扩展(extension)类似，开发人员会发现类似的清单与打包方法。完成开发后，只需zip代码及相关文件就可以发布app了。

一个packaged app包括如下组件：

清单。App的介绍，如何运行及必需的额外权限。
背景脚本。用于创建活动页面，负责管理App的生存周期。
代码。包括相关的HTML，JS，CSS及本地客户端模块。
图标及其它素材。

第一步：创建清单

创建文件manifest.json：

{ "name": "Hello World!", "description": "My first packaged app.", "version": "0.1", "app": {   "background": {     "scripts": ["background.js"]    }  }, "icons": { "16": "calculator-16.png","128": "calculator-128.png" }}

第二步：创建背景脚本

创建一个新文件backgroud.js,内容如下

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

在上面示例代码中，onLaunched事件会在用户启动App时会被最先触发。它会打开一个指定了高度与宽度的窗口。在背景脚本中可以包含其它监听器、窗口、后处理消息及启动数据，所有这些都将用于管理App的活动页面。

第三步：创建一个窗口页

创建你的window.html,内容如下：

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

第四步：创建图标文件

拷贝图标文件到你的App目录下：

calculator-16.png
calculator-128.png

第五步：运行App

启动标记

很多packaged app仍然处理实验阶段，因此你应当启动实验标记，从而可以对它们进行尝试

转到chrome://flags

找到"ExperimentalExtension APIs",点击它的"Enable"链接

重启chrome

加载你的App

为了加载你的App,点击设置菜单，选择Tools->Extensions,打开应用与扩展管理面,

选中Developermode的复选框

点击Loadunpacked extension按钮，并选取你的App目录，点击OK即可。

打开一个新的Tab并运行

一旦加载App成功报，打开一个新的Tab并点击你的App图标。