如何创建ChromeApp

一个ChromeAPP 包含以下内容:

1. 清单文件 manifest.json,列出应用的一些基本信息例如:如何启动应用,应用的权限等等。

2. 事件处理页面也就是我们常说的后台脚本(background script),这个文件管理APP的整个活动周期,这个也是你处理一些事件的监听的地方比如如何启动,关闭应用的窗体。

3.所有的代码文件都必须打包成一个ChromeAPP,包含HTML,CSS,JS和本地模板

4.其他文件,例如图片文件也得打包至ChromeAPP

下面来创建一个APP

第一步: 创建 manifest.json

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"}

这里需要注意的是 第一行 “manifest_version":2 这个必须要加

permissions 如何是访问网站则需要添加在这里

background 就是我们要处理的后台脚本

icons  需要提供一个正方形图片(这个会显示在ChromeAPP的应用列表中),大小就是 第一个参数(px)

2. 添加一个图片也就是icons里的图片,注意大小要与前面的一致,例如128×128

3.创建backgroud.js

/**
 * Listens for the app launching then creates the window
 *
 * @see http://developer.chrome.com/apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create(‘index.html‘, {
    id: ‘main‘,
    bounds: { width: 620, height: 500 }
  });});

这个函数的意思就是在应用启动的时候,添加一个监听,打开index.html这个网站(下一步我们会创建这个)

第四步创建index.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8"></head><body>
  <h1>Hello, let‘s code!</h1></body></html>

完成上面的步骤之后,就基本完成了一个ChromeAPP的相关文件了。 下一步就是运行了。

运行程序

在Chrome的地址栏输入chrome://extensions/  就可以打开扩展程序列表,勾选"开发者模式",点击"加载正在开发的扩展程序" 打开ChromeAPP文件包就可以看到你的应用出现在列表中了。点击应用下方的“启动”就可以查看效果了。

时间: 2024-08-27 19:13:44

如何创建ChromeApp的相关文章

使用 IDEA 创建 Maven Web 项目 (异常)- Disconnected from the target VM, address: &#39;127.0.0.1:59770&#39;, transport: &#39;socket&#39;

运行环境: JDK 版本:1.8 Maven 版本:apache-maven-3.3.3 IDEA 版本:14 maven-jetty-plugin 配置: <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <configuration> <webAppSourceDirectory>${pro

Oracle 10g通过创建物化视图实现不同数据库间表级别的数据同步

摘自:http://blog.csdn.net/javaee_sunny/article/details/53439980 目录(?)[-] Oracle 10g 物化视图语法如下 实例演示 主要步骤 在A节点创建原表和物化视图日志 在B节点创建连接A节点的远程链接 在B节点处创建目标表和与目标表名称相同的物化视图 在B节点处刷新物化视图 升级采用存储过程定时任务JOB方式定时刷新物化视图 进一步优化 文章更新记录 参考文章 Oracle 10g 物化视图语法如下: create materia

MariaDB(MySQL)创建、删除、选择及数据类型使用详解

一.MariaDB简介(MySQL简介略过) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL的代替品.在存储引擎方面,使用XtraDB(英语:XtraDB)来代替MySQL的InnoDB. MariaDB由MySQL的创始人Michael Widenius(英语:Michael Widenius)主导开发,他早前曾以10亿美元的价格,将自己创建的公司MySQL A

git 把本地创建的项目放到github上

很早之前就注册了Github,但对其使用一直懵懵懂懂,很不熟练.直到昨天做完百度前端技术学院的task,想把代码托管到Github上的时候发现自己对于Git的操作是如此之愚钝,所以今天决定把Git好好学习一遍,好让自己以后能更好地使用Github,主要还是通过Git教程 - 廖雪峰的官方网站来学习.简要步骤可以直接看最后的总结. Git的安装就不说了. 第一步:我们需要先创建一个本地的版本库(其实也就是一个文件夹). 你可以直接右击新建文件夹,也可以右击打开Git bash命令行窗口通过命令来创

自签证书的创建与导入

1.创建根秘钥 openssl genrsa -outca.key 20482.创建根证书 openssl req -new -x509 -days 36500 -sha256 -keyca.key -outopenas.crt -subj "/C=CN/ST=Jiangsu/L=Nanjing/O=HuaweiCA/OU=112.13.167.7"3.创建SSL证书私匙 openssl genrsa -outserver.key 2048位4.建立SSL证书 openssl req

c语言动态链表的创建

创建动态连链表就是将一个个节点连接起来 (1)动态生成节点 (2)输入节点数据 (3)将节点链在一起 例: typedef struct Data { char num[20]; char name[10]; char sex; float english; float chinese; float math; }; typedef struct Node { struct Data data;//结构体类型//结构体嵌套 struct Node* next;//结构体指针型 }node,*Pn

eclipse 创建maven web项目

前言: 前面那一篇讲解了Maven的作用以及详细的应用,不了解Maven的具体使用,请参读:http://www.cnblogs.com/hongwz/p/5456578.html,下面来说明一下IDE构建Maven项目. 1.新建Maven项目 1.1 File -> New -> Other 1.2 选择Maven Project ,单击Next 1.3 保持默认即可,单击Next 1.4 选择Archetype为 web app,单击Next 1.5 输入一些必要信息,单击Finish

通过beego快速创建一个Restful风格API项目及API文档自动化(转)

通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界面. 一.创建数据库及数据表(MySQL) #db--jeedev -- ---------------------------- -- Table structure for `app` -- ---------------------------- DROP TABLE IF EXISTS `a

C# 远程服务器 创建、修改、删除 应用程序池 网站

首先 C# 操作 站点 需要 引用Microsoft.Web.Administration.dll 文件,创建站点我们一般需要 远程服务的IP,网站名称.端口.物理路径:这里默认网站名称和应用程序池名称一致. 应用程序池默认不启动,应为刚创建站点是没有对应真实的物理文件,修改 队列长度.启动模式.回收时间.最大工作进程, 以及日志路径.修改的时候如果修改站点物理路径的话,我们需要把文件 从旧得目录拷贝到新的目录下,删除站点就比较简单了. 但是站点应用程序池的停止 和启动就比较难搞了,不是调用st