2007年5月20日星期日

Firefox扩展实例分析: Paste and Go 2

先看一个简单的插件Paste and Go 2,它的功能是:如果剪贴板有一个URL,那么它允许我们只通过一个操作直接转到那个网站去,而不是先在地址栏目粘贴再点击Go按钮; 对于搜索栏也有类似的功能。

它的源代码可以直接通过网页查看: http://www.mozdev.org/source/browse/pasteandgo2/src/

* Overlay
一般而言,XUL overlay文件是个不错的入口,通过它我们可以比较容易知道这个插件扩展了哪些界面元素,然后再根据界面元素去看其对应的代码。

于是我们先看content/pasteandgo2Overlay.xul


这里定义了这个插件的stringbundle, key, command, broadcaster以及firefox特有的toolbarpalette配置。快捷键、命令这些都不是界面控件,但却是一个GUI程序所不可缺少的元素,mozilla/xul把这些功能都拆分了,可以通过overlay来添加和扩展,相当方便。

* 通过脚本动态创建界面元素
但这里没有见到右键点击地址栏时出现的那个Paste and Go菜单项,它是通过脚本content/pasteandgo2.js动态添加的(因为有个添加到"粘贴"后面还是菜单最后的选项):
 function pgInstallMenuItem(e, aID, aLabel, aCommand, aAccesskey) {

item = document.createElement("menuitem");
item.setAttribute("id", aID);
item.setAttribute("label", aLabel);
item.setAttribute("command", aCommand);
item.setAttribute("accesskey", aAccesskey);

if (pgPrefsObserver.pgPlaceAtBottom) { // place at bottom
menu.appendChild(item);
} else { // else place next to paste
var items = menu.childNodes;
for (var i=items.length-1; i >= 0; i--) {
var targetCmd = items[i].getAttribute("cmd");
if(targetCmd == "cmd_paste") { // find out paste
menu.insertBefore(item, items[i+1]);
break;
}
}
}
}

这就是mozilla/xul相当方便的一个地方: 通过脚本可以动态地创建、删除界面元素或者设置它们的属性,并且代码相当简洁直观。

没有评论: