我的Firefox插件开发之旅（3）——我的第一个扩展（转载）

转载：http://www.cppblog.com/epubcn/archive/2008/11/08/66286.html

【原创】我的Firefox插件开发之旅（3）——我的第一个扩展

（原创作品，转载请注明链接）

简单知道了XUL，迫不及待地想立即编写一个插件，哪怕什么事情都不做也好。O(∩_∩)O

通过这个页面https://developer.mozilla.org/en/Building_an_Extension
，可以找到编写一个插件必须要做得一些事情，写的很清楚。最后产生的目录和文件结构是这个样子：

install.rdf

chrome.manifest

chrome

|--content

|--overlay.xul （我准备在这里编写代码，在FF的工具栏上添加一个按钮）

|--locale

|--en-US

|--sample.dtd

|--zh-CN

|--sample.dtd

|--zh-TW

|--sample.dtd

|--skin

|--classic

|--sampleicon.png

|--smallicon.png

|--default.css （界面显示的样式表，今后可能会用到）

上面文件中的install.rdf、chrome.manifest基本上用例子中的就好了，dtd文件里面是界面文字，这个可以模仿其他插件编写。

overlay.xul我准备添加一段代码，用来在FF工具栏上添加一个按钮。skin下面的png是准备在工具栏上添加的按钮的图标。

OK，把上面整个目录用zip打个包，改后缀名为xpi，拖放到FF3中，提示尚未验证作者、是否继续安装。这个先不管它，以后再研究。安装以后，
重启FF3，哈哈，写的第一个Extension成功安装了！只不过overlay.xul里面什么都没写，所以还没有视觉上的成就感。下面开始添加
overlay.xul中的代码。

怎么在工具栏上添加按钮呢？感谢Mozilla提供的文档，专门有一篇文章是讲这个地：https://developer.mozilla.org/en/Creating_toolbar_buttons
。文章里面讲的非常清楚，我这里就不废话了。不过有两点需要注意一下：

1、样式表中的ID和toolbarbutton的id一定要保持一致；

2、按钮的label和tooltiptext可以直接添加文字，但如果使用了中文，有可能会显示乱码（至少在我的FF3上是这样）；

3、按钮的图标一定要大小两种（24x24、16x16）都提供；

4、label和tooltiptext可以使用dtd中定义的文字，但必须注意：dtd文件必须存为UTF-8编码，否则会导致按钮显示不出来！

在FF3的定制工具栏中，有图标，但下方没有文字，好像是我哪里忘记添加文字了，一会儿看看去……

好了，我的第一个FF插件就写好了，不过现在只是在工具栏上添加了一个按钮而已，什么事情都没做，下一次我们添加一些行为给它。

以下附上几个关键文件的内容：

[b]一、install.rdf
[/b]

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#"
>

<Description about="urn:mozilla:install-manifest">

<em:id>{859606AC-AFFE-4691-82C5-FA0148A7E2D4}</em:id>

<em:version>1.0</em:version>

<em:type>2</em:type>

<em:name>MeetMePlus</em:name>

<em:description>Anywhere, anytime to starting a conferencing</em:description>

<em:creator>G-NET</em:creator>

<em:iconURL>chrome://meetmeplus/skin/gnet_32.png</em:iconURL>

<em:homepageURL>http://www.meetmeplus.com/
</em:homepageURL>

<em:targetApplication>

<Description>

<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

<em:minVersion>1.5</em:minVersion>

<em:maxVersion>3.0.*</em:maxVersion>

</Description>

</em:targetApplication>

</Description>

</RDF>

[b]二、chrome.manifest
[/b]
overlay chrome://browser/content/browser.xul chrome://meetmeplus/content/overlay.xul

content meetmeplus chrome/content/

style chrome://global/content/customizeToolbar.xul chrome://meetmeplus/skin/default.css

skin meetmeplus classic/1.0 chrome/skin/classic/

locale meetmeplus zh-CN chrome/locale/zh-CN/

[b]三、overlay.xul
[/b]
<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM "chrome://meetmeplus/locale/overlay.dtd">

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

<overlay id="mmp-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>

<!-- Firefox toolbar -->

<toolbarpalette id="BrowserToolbarPalette">

<toolbarbutton id="meetmeplus-button" type="menu-button"

class="toolbarbutton-1 chromeclass-toolbar-additional">

<menupopup>

<menuitem label="&mmp.gotohome;"
tooltiptext="&mmp.gotohome.tooltip;"
image="chrome://meetmeplus/skin/option_16.png"
class="menuitem-iconic"/>

<menuseparator/>

<menuitem label="&mmp.option;"
tooltiptext="&mmp.option.tooltip;"
image="chrome://meetmeplus/skin/option_16.png"
class="menuitem-iconic"/>

</menupopup>

</toolbarbutton>

</toolbarpalette>

</overlay>

[b]四、overlay.dtd
[/b]
<!ENTITY mmp.gotohome "访问G-NET MeetMePlus">

<!ENTITY mmp.gotohome.tooltip "访问G-NET MeetMePlus网站">

<!ENTITY mmp.option "选项">

<!ENTITY mmp.option.tooltip "自定义G-NET MeetMePlus的工作方式">