google chrome是一个很神的浏览器，特别对于开发人员来说，代码接口都开源，可以做很多有意思的开发。
基于chrome的两种开发方式：1.chrome extension(扩展程序) 2.chrome app(应用)
- 扩展程序(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
网友评论