Chrome扩展程序开发调试简明教程
一、加载扩展程序
这里以加载一个已有的Chrome扩展程序为例。
把已有的扩展程序(.crx文件,点击安装扩展程序的确定按钮前可以拷贝保存)后缀改为.zip,就可以把它解压缩到某个目录,比如Beyond Feeds Flood。
参见下图,点击“载入正在开发的扩展程序”,浏览到刚才的目录,点击确定,扩展程序就加载进去了(跟安装的基本一样)。
二、调试扩展程序
扩展程序安装后是这个样子:
如果是调试background.html,则插件下方“检查活动视图”中就有,点击它就可以调试了。
开发中,经常要调试的是popup.html,它不是总处于活动中的,需要按如下方式操作:
1、确定popup.html的网址。(把下面网址中的id部分替换为你的扩展程序id即可)
chrome-extension://clobmlkkihhfbohnabllkobmmmdhkcmo/popup.html
2、在浏览器中打开该网址。
打开后就可以看到popup.html页面也在活动视图中了:
3、点击上图中的popup.html,就打开了调试器。
如果有错误信息,点击console按钮就可以看到了。
点击错误信息中的位置链接,可以达到出错位置:
这里的错误信息很明显,是reader1没有定义。
Chrome的Javascript调试器非常强大,点击左边的行号可以设置断点,可以单步跟踪,鼠标放在变量上可以查看变量的值。
注:
1、调试中,设置了断点,有时候需要考虑采用一些措施,才会运行到那里,这需要根据你调试的功能以及如何触发该功能的知识来确定。
2、Google Web Toolkit是很好的扩展程序调试、优化工具,感兴趣的同学可参考:http://code.google.com/intl/zh-CN/webtoolkit/speedtracer/get-started.html
三、编写扩展程序
这篇文章不是完整的扩展程序编写指南,它只是介绍如何利用已有的编程知识来编写Chrome扩展程序,所以编写扩展程序这个章节排的比较靠后。
简单说来,Chrome扩展程序编写主要用到的是Javascript、Ajax(基于javascript的异步通信机制)、css、html、DOM(以操纵对象的方式控制html页面的内容)。
这些知识可以从http://www.w3school.com.cn/ 学来,遇到问题多问Google,基本都能解决。
这里主要根据我的经验写一点扩展开发中可能用到的知识:
(更多详细信息请参考Chrome扩展程序开发手册 http://code.google.com/chrome/extensions/getstarted.html)
1、处于活动状态的页面的函数,别的页面可以调用。典型的就是通过下面方式调用background页面的函数:
chrome.extension.getBackgroundPage().markItemsAsRead(itemsToMark);
2、javascript的赋值,除了基本类型、字符串以外,都是引用赋值。
3、涉及数据存储的,可以保存到localStorage中(据说云中还有个数据库也可以用来保存数据)。
4、网上有很多封装得很好的javascript库,使用它们有可能能减少工作量,比如我开发Beyond Feeds Flood的时候,就用到了Date的一个封装库。
四、发布扩展程序
一般来说,有如下两种发布方式:
1、打包为crx文件发布。
命令行执行如下命令即可:
chrome.exe --pack-extension="D:\Projects\Beyond Feeds Flood"
执行完之后,就在Beyond Feeds Flood目录平级的地方生成Beyond Feeds Flood.crx和私钥文件Beyond Feeds Flood.pem,私钥文件用于升级软件时使用。
前面提到的扩展程序id,应该就是根据私钥文件生成的。
重新发布时使用的命令行是:
chrome.exe --pack-extension="D:\Projects\Beyond Feeds Flood" --pack-extension-key=“D:\Projects\Beyond Feeds Flood.pem”
生成的crx用于发布,私钥文件自己保存。
2、上传到Chrome Extension Gallary。
注册之后就可以上传,上传时是传的扩展程序目录所有文件打包成的一个.zip文件(注意不是.crx)。
上传中,不需要用到pem文件。
注:
(1)有时候Chrome上传不成功,用IE能上传成功。
(2)至少需要上传一张截图,但截图大小严格限制为400*275,400为宽(虽然说是不严格),所以上传时用工具先调整好图片大小。