开发Chrome插件入门


英文帮助文档:http://code.google.com/chrome/extensions/overview.html

这次初步的插件开发,发现过程还是比较简单,有HTML和Javascript基础的朋友,都能开发出属于自己的Chrome插件。

2.设计插件 
一个完整的插件是由4个部分组成,分别是manifest.json、.js文件、图标和HTML文件,设计插件就是设计这4类文件。manifest.json的作用是定义插件的属性,例如名称、版本、类型等;HTML文件具体实现插件的功能;.js文件是一个跟浏览器互动的脚本。

3.载入插件 
设计好上面几个文件后,就可以将插件载入浏览器中试用一下。首先将它们整理到同一个文件夹中,然后在Chrome的工具栏中选择“扩展程序”,进入扩展管理页,在右侧选择“开发人员模式”,再点击“载入正在开发的扩展程序”按钮,定位到这个文件夹,将整个文件夹载入Chrome中。

4.发布插件 
插件试用没有问题后,不妨将它发布出去让更多人使用。首先将插件所在的文件夹压缩成一个ZIP文件(别顺手压缩成了RAR文件)。然后再到扩展管理页,点击右下角的“获得更多扩展程序”链接,进入Chrome官方插件下载页面,在这个 页的左下角,你能看到“发布扩展程序”的链接,点击链接,上传ZIP压缩文件、添加插件的使用说明和截图,就可以发布插件了。

组成结构 
Chrome插件最基本的三个文件为:

icon.png: 用于在插件工具栏上显示图标,文件名可以自定义,19*19; 
manifest.json: 控制整个插件行为的配置文件,该文件需要保存成UTF-8格式; 
popup.html: 点击插件图标后弹出的窗口,是插件的主界面,文件名可以自定义。 
如果希望插件结构更完善,还可以包含如下文件/目录:

imgs目录:存放插件中使用的图片; 
css目录:存放CSS文件; 
js目录:存放JS文件; 
background.html: 插件的后台程序,其不会因为popup.html窗口消失而停止运行。 
icon_128.png: 在插件描述中作为插件的Logo,128*128。 
manifest.json 为整个插件的主控文件,基本功能描述如下: 

Copy to Clipboard

“permissions”: [ 
“http://www.groovyq.net/” //此权限支持向 <a href=”http://www.groovyq.net/” title=”http://www.groovyq.net/”>http://www.groovyq.net/</a> 发送 Ajax 请求 

}

popup.html为整个插件的界面,框架如下: 

Copy to Clipboard

<!– 注意js代码的路径,下面访问的是与popup.html同级目录的groovyq.js –> 
<script type=”text/javascript” src=”./groovyq.js”></script> 
<script type=”text/javascript”> 
……

</script> 
<body > 
…… 
</body>

关于Background.html

在popup.html中定义的JavaScript变量会在popup.html页面关闭时被释放,如何保存全局变量呢时可以使用background.html。background.html页面中定义的javascript变量会在Chrome浏览器生命期中一直存在,因此把全局变量放在这里是最合适的了。 

Copy to Clipboard

对于数据保存,还可以使用HTML5的localStorage:

Copy to Clipboard

插件调试/发布 
插件开发中,可以使用任何浏览器打开popup.html进行调试。但若是用到一些Chrome的特性,就需要在Chrome上进行调试。

安装插件:Chrome中,单击工具栏的扳手按钮,选择工具 -》扩展程序,在出现的页面中单击:开发人员模式 -》载入正在开发的扩展程序,选择插件的根目录,确定。

在扩展程序列表中会出现插件的相关信息,而在Chrome的工具栏中也能看到插件图标,单击图标,弹出的就是popup.html。 
如果修改插件程序,只需单击插件描述信息下方的“重新载入”,修改就会生效。你还可以在此对插件执行停用/卸载等操作。

插件开发结束后,可以打包插件分发给更多人享用你的插件。可以选择“打包扩展程序”,填入插件根目录以及私有密钥,之后在https://chrome.google.com/extensions 发布你的程序即可

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2012年4月4日
下一篇 2012年4月5日

相关推荐