谷歌插件/App -- 入门

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

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

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

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

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

谷歌插件/App -- 入门_第2张图片
一个播放器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
}
});
});

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

谷歌插件/App -- 入门_第3张图片
Paste_Image.png

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

谷歌插件/App -- 入门_第4张图片
Paste_Image.png

谷歌插件/App -- 入门_第5张图片
Paste_Image.png

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

谷歌插件/App -- 入门_第6张图片
Paste_Image.png

你可能感兴趣的:(谷歌插件/App -- 入门)