创建第一个　chrome app

最新推荐文章于 2021-04-02 11:38:07 发布

qinglangee

最新推荐文章于 2021-04-02 11:38:07 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： app chrome

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

创建第一个　chrome app

一个　Chrome App 包含以下部分：

manifest　文件告诉　Chrome 你的 app 是什么　，　如何启动它以及它需要的额外权限．
background　脚本用来创建事件响应页面管理 app 的生命同期．
代码必须包含在 Chrome App 包中．　包括　HTML, JS, CSS 和本地模块．
图标和其它资源也要包含在包中．

第一步，　创建　manifest

First create your manifest.json file (Formats: Manifest Files describes this manifest in detail):
首先新建一个 manifest.json 文件，　(Formats: Manifest Files 描述了 manifest 的细节)

{
  "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" }
}

重要: Chrome Apps 必须使用 manifest version 2.

第二步，创建　background 脚本

新建一个 background.js

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

在上面的示例代码中，当 app 启动时 onLaunched事件会被发出．　它会立即按指定的宽高打开一个窗口．　你的 background 脚本可以包含更多的 listener,window, post message and lauch data.

第三步，　创建一个窗口页面

新建 window.html

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

第四步，　创建图标

把这俩图标复制到你的 app 目录
calculator-16.png
calculator-128.png

启动你的 app

　启用标志

很多 Chrome Apps APIs 还是实验性的，　所以你要打开实验　api 才可以用

打开 chrome://flags　页面.
找到 “Experimental Extension APIs”, 点击 “Enable” 链接.
重启 Chrome.

加载 app

点击菜单图标，选择　Tools > Extensions, 打开应用和插件管理页面．　　
把　Developer mode　的多选框选上．　　
点击　Load unpacked extension 打开你 app 的目录　．

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

These command line options to Chrome may help you iterate:

--load-and-launch-app=/path/to/app/ installs the unpacked application from the given path, and launches it. If the application is already running it is reloaded with the updated content.
--app-id=ajjhbohkjpincjgiieeomimlgnll launches an app already loaded into Chrome. It does not restart any previously running app, but it does launch the new app with any updated content.

另外一个更完整的多步骤的例子

Build a Todo Chrome App

refs:
Create Your First App

qinglangee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建第一个　chrome app

创建第一个　chrome app一个　Chrome App 包含以下部分：manifest　文件告诉　Chrome 你的 app 是什么　，　如何启动它以及它需要的额外权限．background　脚本用来创建事件响应页面管理 app 的生命同期．代码必须包含在 Chrome App 包中．　包括　HTML, JS, CSS 和本地模块．图标和其它资源也要包含在包中．第一步，　创建　mani
复制链接

扫一扫