【Firefox扩展】简单扩展之3——overlay toolbar

简单扩展之3——overlay toolbar

这一系列的前两篇blog并没有涉及到图形元素，这篇toolbar的扩展，将会加入skin包，在toolbar上添加一个button，然后在button上显示一个png类型的图片。这样至少能让我们的扩展漂亮点~_~

首先，还是这个xpi扩展包的目录结构：
/chrome
---/extdemo.jar
/install.rdf
/chrome.manifest
extdemo.jar的目录结构如下：
---/content
---/overlay.xul
---/overlay.js
---/skin
---/classic
---/ExtensionDemo.css
---/small.png
---/normal.png

一目了然，目录结构中多的只是一个skin子目录，这个子目录中包含了css样式文件，和两个png图片文件（其实一个就ok了）。当然，如果只是加上这个目录，其他都不变的话，那么他不会正常工作的，需要在chrome.manifest中修改相应的注册信息，还需要在overlay.xul中添加样式引用。

我们逐个介绍，install.rdf还没有什么改变~!我决定了，firefox扩展的一些界面部分的信息搞定了以后，我马上写一个小IDE把模板先把install.rdf格式搞出来~

然后依旧是重要的chrome.manifest，这次我们加入了一些重要的skin包信息。

overlay chrome://browser/content/browser.xul chrome://extdemo/content/overlay.xul
content extdemo jar:chrome/extdemo.jar!/content/



skin extdemo classic/1.0 jar:chrome/extdemo.jar!/skin/classic/

和前面两篇blog一样，他也有必不可少的content包和覆盖browser.xul的说明，不同的是，我们加入了skin包的注册信息，Mozilla的skin是与theme配套的，又据说Mozilla缺省提供了classic和modern，（可是我在chrome目录下只发现了一个classic.jar，并没有什么modern.jar文件）。当我们通过chrome访问skin时，Mozilla会自动根据正在使用的theme加上classic或modern。比如说我们访问chrome：//extdemo/skin/extensiondemo.css，其实真正访问的是chrome://extdemo/skin/classic/extensiondemo.css；只不过这个过程被隐藏了，我们什么也看不到。
这里还需要说明一下，我在学写扩展的时候，看的文档主要是MDC和大侠limodou的blog再就是别人写的非常优秀的扩展，可是MDC满篇E文字，对于写扩展介绍的并不是很多很细；limodou的blog又是2005年写的，其中有些文件如contents.rdf是不必在包含在chrome下的三个文件夹中的，所以我的文件夹中没有这些rdf的影子，有兴趣的朋友可以看看web developer扩展和scrapbook扩展，最新版中也是没有的。
好了，回到我们的扩展中来，skin包注册时要比content包多一个classic/1.0的部分，大家注意下就ok了。

接下来是content下的文件，这个扩展实现了工具条上的按钮checked状态的切换，就是说第一次如果这个按钮是按下去的状态（checked状态），那么在按下这个按钮后，这个按钮会变成普通状态（unchecked状态）。
首先我们来看overlay.xul文件：


<?xml version="1.0"?>




<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>


<?xml-stylesheet href="chrome://extdemo/skin/ExtensionDemo.css" type="text/css"?>




<overlay id="ProxyInput-overlay"


xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">




<script type="application/x-javascript" src="SelectChecked.js"/>




<toolbox id="navigator-toolbox">


<toolbar id="checked-toolbar" class="chromeclass-toolbar" collapsed="false" hidden="false" mode="full">


<toolbarbutton id="check-button“ tooltiptext="push it, Please!" checked="true" oncommand="SelectChecked()"/>


</toolbar>


</toolbox>




</overlay>

有几点需要说明：
1.代码中第二行和第三行是对css样式的说明，这里引用了全局样式，之后引用了skin包中的自定义样式；
2.要扩展工具栏，toolbox的这个id是必须的；
3.toolbar是容器，toolbarbutton才是真正的容器中的元素，这个button的id被定义为check-button，注意这个id!他非常重要。之后的tooltiptext是鼠标放在这个按钮上时显示的文字，checked为true表示这个按钮被设置为checked状态，之后响应按钮被按下的处理事件。处理事件被定义在SelectChecked.js文件中，这个js文件的代码如下：


function SelectChecked()




...{


var bIsChecked = document.getElementById('check-button').getAttribute('checked');


if(bIsChecked == "false")




...{


document.getElementById('check-button‘).setAttribute('checked','true');


}


else


{


document.getElementById('check-button').setAttribute('checked','false');

}


}

这里面包含了一些DOM操作，我就不细说了，大概过程就是从DOM树中取得id为check-button的元素的checked属性的状态，然后判断它的值，设置成与当前状态相反的值。
Stop!图片呢?答案在css文件中。

最后我们来看 ExtensionDemo.css 这个文件，代码很简单，如下：


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");






/**//* Toolbar buttons */




#check-button




{...}{


list-style-image: url("chrome://extdemo/skin/normal.png");


}




toolbar[iconsize="small"] #check-button




{...}{


list-style-image: url("chrome://extdemo/skin/small.png");


}



看到了吧，这里引用了check-button的id，然后把这个id绑定上一个图片，如果你会css，会DOM，那么应该很好理解；如果你不是很了解他们俩，那么你和我一样，说实话，这样的一种映射关心对初学者来说理解很困难，不过只要你有耐心，找一找别人写好的优秀的扩展，你会发现这个关系的，我是这样过来的，想想前两天一头雾水，把他搞定后心情真的很复杂~
总结一下，在一个button上添加一个图片（其实不一定仅是toolbarbutton），是在xul中声明一个id，然后在css文件中引用这个id，与在skin目录下的图片绑定，绑定方法就像这个css写的那样，至于其他的高级css方法，以后学了再说~

打包后，就能看到效果，说实话，工作之前，我根本没听说过XUL、对DOM、CSS也一点概念都没有，学过两个月的python，所以javascript比较容易上手，但是那三种东西就像三座大山一样，让我在接到任务的那两个礼拜压力很大，也许这就叫工作~草TMD!
不过还是要说，坚持过来后，做出了点简单的东西，心情好了些，而且得到像老大这样的牛人的肯定后，会觉得值了，至少自己学了些东西。