黄聪：360浏览器、chrome开发扩展插件教程（1）开发ChromeExtenstion其实很简单

转载&＃xff1a;http://www.cnblogs.com/walkingp/archive/2011/03/31/2001628.html

Chrome的更新速度可以说前无古人&＃xff0c;现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。界面清爽、操作人性化、网络备份资料 和快速的启动速度令我爱不释手&＃xff0c;还有它拥有众多的扩展程序&＃xff0c;相对于firefox的插件来说&＃xff0c;数量上和质量上稍显不足&＃xff0c;但相信chrome将会很快在扩展 上超越firefox&＃xff0c;firefox上内存占用上实在不令人满意&＃xff0c;也许我使用firefox的一个原因就是因为firebug&＃xff0c;不过相信chrome平 台的类firebug插件也会很快出现。

Chrome的扩展开发十分简单&＃xff0c;我们只需要掌握web开发的htm&＃43;CSS&＃43;Javascript&＃xff0c;就能很快开发出自己的扩展。

你需要了解的内容

在开发前首先要掌握一些基础知识。

1、Chrome扩展文件

Chrome扩展文件以.crx为后缀名&＃xff0c;在Google Chrome扩展官方网站下载扩展时&＃xff0c;Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下&＃xff0c;一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp&＃xff0c;安装完成或者取消安装&＃xff0c;该文件就会被删除。.crx实际上是一个压缩文件&＃xff0c;使用解压文件打开这个文件就可以看到其中的文件目录&＃xff0c;下图中是“关灯看视频”扩展的截图&＃xff1a;

因此可以认为&＃xff0c;我们实际上就是写一个Web应用&＃xff0c;然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。

2、Browser Actions&＃xff08;扩展图标&＃xff09;

把Browser Actions翻译成扩展图标不是很准确&＃xff0c;但它的功能就是把你的应用显示在Chrome工具栏上。我们在上面看到一个文件manifest.json&＃xff0c;就 是使用这个文件来把相应的图标和其他参数注册到Browser Actions。比如下图中就是EverNote的扩展图标。

3、Page Actions&＃xff08;地址栏图标&＃xff09;

如果你熟悉一些Chrome插件的话&＃xff0c;你一定会发现有些扩展的图标不是显示在地址栏的右边&＃xff0c;而是显示在地址内部右方&＃xff0c;这就是Page Actions地址栏图标。

可以看出上面中有三个Page Actions&＃xff0c;图中我标出的是Chrome添加书签&＃xff0c;现在你就会发现其实这个也是Chrome的扩展&＃xff0c;只不是它是直接内置在Chrome的。

Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的&＃xff0c;必须在特定的页面中这个功能才能使用。因此在开发中注意&＃xff1a;如果不是全部页面中都能使用的功能请使用Page Actions方式。

4、popup弹出窗口

popup属于Browser Actions&＃xff0c;当点击图标时出现这个窗口&＃xff0c;可以在里面放置任何html元素&＃xff0c;它的宽度是自适应的。当然&＃xff0c;这个弹出窗口不会被Chrome拦截的:)

如下图中是evernote的popup窗口&＃xff1a;

5、Background Pages后台页面

这个窗口不会显示&＃xff0c;它是扩展程序的后台服务&＃xff0c;它会一直保持运行。比如在一些需要数据保存程序中&＃xff0c;如果当前用户关闭popup&＃xff0c;就需要Background Pages来进行相应的操作。

自己动手做一个

我们以一个简单的任务管理程序来一步步讲解。

上图是界面实现&＃xff0c;我们首先完成界面的显示部分&＃xff0c;首先建立一个新文件夹&＃xff0c;以扩展应用的名称为标题&＃xff0c;我们这里的应用叫做MyTaskList。然后把找一个图标文件&＃xff0c;放到文件夹中&＃xff0c;也可直接右键下载我的这个图标&＃xff1a;

图标文件不要小于19px*19px&＃xff0c;但最好也不要超过这个尺寸&＃xff0c;虽然大图它会自适应&＃xff0c;但会使得应用文件变大。然后完成和未完成状态的两个图标放到资源文件中&＃xff0c;可以建立任意文件夹放进去&＃xff0c;因为CSS文件把定义它们的路径。

建立manifest.json来定义我们程序配置&＃xff1a;

其中name代表应用程序名&＃xff0c;version代表版本号&＃xff0c;description代表功能描述。这些在安装扩展后就能看到&＃xff0c;见下图&＃xff1a;

browser_action代表扩展图标段显示&＃xff0c;它会定义图标地址、标题&＃xff08;也就是鼠标悬停提示&＃xff09;和默认的popup页面。我们这里定义的popup页面为popup.html。

接下来开始定义popup.html显示&＃xff0c;它不需要使用、和标签&＃xff0c;可以直接写上样式、脚本和html。我们的popup.html源码为&＃xff1a;

打开预览&＃xff0c;样子就已经出来了&＃xff1a;

这样我们文件就已经建立完成&＃xff0c;文件列表如下&＃xff1a;

现在就可以先尝试把它打包装到自己的Chrome里。

首先打开Chrome-工具-扩展程序&＃xff0c;展开开发人员模式&＃xff0c;打到“打包扩展程序”按钮&＃xff1a;

点击“打包扩展程序…”&＃xff0c;弹出打包选择文件窗口&＃xff0c;在扩展程序根目标中找到我们建立的文件夹&＃xff0c;私有密码文件第一次不用选择&＃xff1a;

点击确定&＃xff0c;它会在根文件夹同一级生成MyTaskList.crx和MyTaskList.pem&＃xff0c;MyTaskList.pem是程序签名文件&＃xff0c; 以新版本的开发中还需要这个文件&＃xff0c;不要删除它。把MyTaskList.crx拖进Chrome窗体内&＃xff0c;就会把这个应用MyTaskList安装在 Chrome里。

我们的这个简单的模型就能看到效果了&＃xff0c;下一节我们就会完善其中的代码。