Chrome扩展程序开发调试简明教程

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。

网址：https://chrome.google.com/extensions?hl=zh-cn

注册之后就可以上传，上传时是传的扩展程序目录所有文件打包成的一个.zip文件（注意不是.crx）。

上传中，不需要用到pem文件。

 

注：

（1）有时候Chrome上传不成功，用IE能上传成功。

（2）至少需要上传一张截图，但截图大小严格限制为400*275，400为宽（虽然说是不严格），所以上传时用工具先调整好图片大小。