Chrome桌面设备专用App开发入门

2013-11-04 03:13 ·Ab叔 5691 3 <- 点击左侧的数字“攒”一个吧

Google推出了全新类型的Chrome App，这些应用既拥有现代网络的速度、安全性和灵活性，又拥有那些安装在设备上的软件才具备的功能性。这其实是Chrome OS的理念，联网时所有应用都能在Chrome浏览器内工作，离线时，它们能像桌面软件一样正常使用。

Download

现在Google将这类应用推广到Windows、Mac和Linux平台，其心昭然若揭，自然是借助这些平台让大家习惯Chrome Apps，熟悉并接受Chrome OS，有朝一日能像Android颠覆手机市场那样，实现对桌面操作系统的颠覆。

现在你打开Chrome浏览器并到Chrome 网上应用店，你会发现多了一项“桌面设备专用”的类目。

其中添加了不少的桌面应用，使用起来与其他windows程序一样。

Chrome的桌面应用程序包含以下组件：

1：manifest.json 告诉chrome浏览器您的程序是什么，如何启动它，它需要额外的权限；
2：background script 用来创建负责管理应用程序的生命周期的活动页面。
3：app所有的代码都必须包含在Chrome应用程序包。这包括HTML，JS，CSS和本机客户端模块。
4：程序图标icon。


那么接下来我们就简单的开发一个Hello, world!程序来揭示怎么基于chrome开发桌面app。

Step 1: Create the manifest（manifest.json）

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

Step 2: Create the background script（background.js）

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

Step 3: Create a window page（window.html）

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

Step 4: Create the icons

拷贝下面两个icon到您的app目录中

1:abshu-16.png

2:abshu-128.png

Step 5: Launch your app

前期代码与需要的程序文件都已经准备好了，如下图

需要运行您的程序在chrome浏览器中。

第一步需要开通实验性应用程序的运行权限

  • Go to chrome://flags.
  • Find "Experimental Extension APIs", and click its "Enable" link.
  • Restart Chrome.

第二步将您的应用程序添加到chrom浏览器的扩展程序中

点击运行就能可以了