Chrome插件开发简单实战教程
Chrome凭借其简单,稳定,快速的优点迅速风靡全球,占领浏览器市场,直逼IE的市场份额,超越也只是时间问题。初次打开Chrome浏览器,你会发现整个页面只有一个地址栏,一对箭头,刷新按钮和一把扳手,当然还有最重要的空白页面,这就是Chrome的整体构造,可以说是最简单的浏览器了,但是仔细深入你会Chrome的功能远不止这些,通过Chrome的扩展中心你可以安装成千上万的插件来丰富你的浏览器功能,这时你就会发现Chrome的强大之处。
Chrome的扩展中心地址是 https://chrome.google.com/webstore,里面有全球的开发者开发的插件,你只需要选择,然后点击添加到Chrome即可。目前从事Chrome开发的人非常少,我觉得可能是某种网络不稳定因素造成的Google服务不稳定,导致了大家都不愿意开发这片市场,所以在网络上关于Chrome开发的资料少之又少,目前官方的开发文档也都是英文的,阻挡了不少E文小白对Chrome开发的热情。Chrome官方开发文档地址:http://code.google.com/chrome/extensions/dev/devguide.html 我大致看了一下,对他的结构也有所了解,这里将做一个简单的实战来检测一下我的开发水平。 学艺不精,多多包涵,老鸟路过,新手可以参考下,作为入门教程。
过去大家在添加插件后,图标会出现在地址栏的右边,点击即可快速打开插件,在新版的Chrome中,又多出了一个叫Apps的东西,如下图画红线的部分:
App的开发和扩展大同小异,为了满足大家的成就感快速开发出一个可用的App这里就从App讲解。
一个最简单的APP需要由一个图标和一个名为manifest.json的文件组成。
第一步:
新建一个文件夹,准备一个图标,建议128×128大小的。然后创建一个文件,命名为manifest.json,用记事本打开,复制以下代码:
{
"app":{
"launch":{
"web_url":"http://blog.sina.com.cn/eyeofming"
},
"urls":["http://blog.sina.com.cn/eyeofming"]
},
"description":"Ming'sChinaBlog",
"icons":{
"128":"eye.png"
},
"name":"EyeOfMing",
"version":"1.0"
}
web_url和url是你要启动的网址,description是App的描述,icons下的128是图标的尺寸,比如说你的图标是16×16的,那么你就填16,建议128×128的大小,然后eye.png就是你的图标文件名。name是App的名字,下面的version是版本号,这个就自定义了,需要注意的是避免使用中文,一定要用utf-8。
第二步:
这一步可以称之为调式,在Chrome中输入chrome://settings/extensions 打开插件页,先勾选开发者模式,这样会出现一个载入插件的选项,如下图:
点击载入插件后,在路径中找到保存文件的文件夹然后打开就行了,如果顺利的打开,就说明你的插件没有任何问题,如果错误的话,他会提示你在哪里错了,然后按照他的提示修改就行了。来看看我的作品,如下图:
是不是很简单,如果你还没学会,不要急多试几次就好了,这里是打包的源码,大家可以自行修改。
第三步:
制作好App后,要想出现在Google的扩展中心你需要提交给Google进行审核,提交地址:https://chrome.google.com/webstore/developer/update 注意要压缩成zip格式后提交,不要用.crx格式。上传后,填写相关信息,然后就是等待审核上线。
相关资源推荐
代码编辑工具:Notepad++http://notepad-plus-plus.org/