做了一段时间的chrome插件这里写点技术心得,给需要的朋友们。

1.开发文档

国内的chrome插件开发者很少,google code上连份中文的tutorial都没有。幸好插件开发难度不大,主要代码都是Javascript,只要有点互联网开发知识,一般问题都能对付过去。

英文材料:google的官方文档:http://code.google.com/chrome/extensions/overview.html

中文材料:360浏览器借着chrome的芯,也出品了一份中文版开发文档:http://open.chrome.360.cn/html/dev_doc.html(虽然翻译得奇烂无比,但结构比较完善,里面小例子也多,将就着看吧)


chrome插件开发中文论坛:http://dev.chromechina.com/forumdisplay.php?fid=30 (貌似不怎么活跃,可以进去耍耍)

w3cschool,大名鼎鼎的教学网站,不用再介绍了吧。

HTML5安全:http://blog.csdn.net/hfahe/article/details/7727460

关于本地存储数据:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html

2.开发\debug入门

读上文的材料吧,看看content\background\popup等等页面之间的关系,写个manifest,用chrome自带的开发工具就能debug,其它和一般的网页开发没有区别。

3.JS 的运行环境

插件运行在一个特殊的isolated world中,插件可以访问页面的DOM ,对网页做任意修改,这也算是基本功能吧。

但出于安全性,插件不能访问页面的JS运行环境。

4.插件的跨域请求(cross origin request)

不少插件需要在后台定抓取析网页、提取信息,而Javascript又要求同源,这两者显然是矛盾的。chrome插件里,只要在permission里做好申明,Javascript是可以做跨域请求的!也就是说JS可以直接在后台请求自己需要的页面、作分析。

但出于安全性要求,chrome也作出了一些限定,比如不允许set-cookies。此外,开发者一定要注意控制跨域的请求参数,防止用户注入,可以看看google这篇Cross-Origin XMLHttpRequest

5.HTML5

chrome插件当然能使用html 5的特性,喜欢尝鲜的童鞋可以试试。

chrome插件开发_chrome插件开发


6.插件在读取框架(frame)时的bug

插件似乎无法用window.frames[index]来获取子框架window,是个很奇葩的bug。关于它,chrome论坛上2009年就有一个贴(http://code.google.com/p/chromium/issues/detail?id=20773),到现在还没解决= =

要读取frame时,可以考虑使用content -> run at all frames来迂回实现。

7.插件更新

指定了更新路径之后(update.xml),chrome插件会自动更新,此功能无法关闭。用户们普遍很懒,不会手动下载新版本,建议开发第一版插件时就设定更新网址,以免后期遇上版本分化,影响新功能推广。

8.插件发布

插件打包工具会把插件所在目录的文件统统包括进去,打包前注意控制文件夹体积,过大的插件包可能会影响更新。

第一次打包发布后记得备份pem文件,后续版本更新都要用到它。插件的安装包是个CRX文件,后缀改成zip就能解压。

安装时如果遇到CRX-FILE-NOT-READABLE错误,把文件拖动到地址栏就能安装了。


9.架构理解
1. content script 可以操作DOM
2. background.html 可以获得 localStorage
2者之间 用通信来互相操作。
background.html 执行onRequest.addListener中, 当content script 有请求 extension.sendRequest 返回数据回来

即:background相当于后台,content scripts 相当于前台


写在最后

浏览器已经变成了用户的第二个桌面,从桌面到移动,它的广阔前景是业界所公认的。而插件的出现既是一种功能补充,又像是一种倒退,它对浏览器的要求注定了自己在推广上的难度。吾以为,在浏览器越来越成熟之后,插件的生存空间会越来越小,开发者们可以用插件自娱自乐,但别把它当主业了,这东西前景不好呢。
最后上几张皮皮精灵插件版的效果图:

chrome插件开发_chrome插件开发_02


chrome插件开发_chrome插件开发_03


chrome插件开发_chrome插件开发_04