谷歌插件/App -- 入门

google chrome是一个很神的浏览器，特别对于开发人员来说，代码接口都开源，可以做很多有意思的开发。

基于chrome的两种开发方式：1.chrome extension(扩展程序) 2.chrome app(应用)

1. 扩展程序(extension) chrome://extensions
   例如：印象笔记的剪裁工具，在chrome商店或者印象笔记官网下载对应文件，安装好以后会在浏览器右上角出现一个大象的图标

印象笔记

这种扩展程序能够操作让浏览器操作任何页面的元素，例如保存某些数据(爬虫)，截图，或者拦截广告等，只要浏览器启动了，那么扩展程序就会生效，这种程序完全依赖浏览器而存在

2.应用程序(app) chrome://apps
则是可以‘脱离’浏览器单独运行的一种程序，可以创建快捷方式，不开浏览器运行，可以有自己的图标，程序以及一个或多个窗口。为什么‘脱离’打了引号呢？因为你的chrome浏览器还是得安装的，不然还是运行不了app的

一个播放器app

接下来现在我们动手开发一个简单的应用程序：
a.首先在桌面新建一个 my_app的文件夹,找个128*128像素的png或者ico文件放进去(当做程序图标)，例如我放的名字叫icon.png
b.新建一个文本文件然后改名为: manifest.json 然后输入代码并保存：

{
"manifest_version": 2,
"name": "my app",
"version": "2",
"minimum_chrome_version": "35",
"icons": {
"128": "icon.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions":[]
}

c.新建文本文件然后改名: index.html 输入代码保存：

随便写点什么吧！
hello world！
12345……

d.新建文本文件然后改名: background.js 输入代码保存：

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: "MainWindow",
innerBounds: {
width: 900,
height: 600
}
});
});

到这里代码就都写好了，最终的文件结构为：

Paste_Image.png

接下来在chrome浏览器中输入 chrome://extensions
勾选‘开发这模式’，然后点击‘加载已解压的扩展程序...’，找到并选择刚刚的my_app文件夹，然后就会出现下面的程序了，点击启动~

Paste_Image.png

Paste_Image.png

点击‘详细信息’可以选择在桌面创建快捷方式，这样以后就可以直接脱离浏览器启动我的程序了 ^_

Paste_Image.png