关于Firefox的extension开发

今天下午心血来潮，抽空看了一下FF的扩展开发，这里把一个下午的收获列一下：

 

首先先要在本地建立一个开发环境，参考

https://developer.mozilla.org/en/Setting_up_extension_development_environment

 

接着需要了解一下extension的文件结构，参考

https://developer.mozilla.org/en/Building_an_Extension

 

完成之后的话，你可以看到你的FF下方的状态栏已经被改变了，至此一个最简单的扩展已经完成。

 

如果需要进一步的学习的话，需要看下面一些资料：

 

使用XUL来修改UI：

https://developer.mozilla.org/en/XUL_Tutorial

 

可以看一下它的事件捕捉 和XPCOM

 

到这里应该可以用XUL做出很好的控件了

 

不过我还有一个地方没明白，我的扩展如何去访问当前页面里面的那些HTML元素呢？就像Firebug那样，找了半天，后来在QuickDrag这个扩展里面找到了线索，原来FF会初始化很多的全局变量，其中有一个叫做gBrowser 的变量，通过对这个变量的操作就可以访问到HTML的元素了。

 

还有一个问题，如果我想在每次页面load完成之后执行一段特定的任务（比如在状态栏里面显式当前页的标题），该如何呢？第一个想到的是在XUL文件里面定义window.onload事件，不过测试下来不行，这个只会在浏览器刚打开的时候执行。最后还是在Mozilla Developer上找到了答案 。

 

最后的代码就是这个样子了：

 

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="" /> </statusbar> <mce:script type="text/javascript"><!-- window.addEventListener("load", function() { myExtension.init(); }, false); var myExtension = { init: function() { var appcontent = document.getElementById("appcontent"); // browser if(appcontent) appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true); }, onPageLoad: function(aEvent) { var title = gBrowser.contentTitle; var sPanel = document.getElementById("my-panel"); sPanel.label = title; } } // --></mce:script> </overlay>

 

 

 

2010.6.30.补充：

 

通过content.document可以直接访问document对象，比如

var document = content.document; var ele = document.createElement('div'); ele.innerHTML = 'hello world'; document.body.appendChild(ele);