浅谈基于Mozilla ThunderBird的扩展开发

我目前主要从事基于Mozilla ThunderBird邮件客户端的扩展开发，可惜国内对于基于Mozilla平台的扩展开发关注度很小，而且其中大部分都是做基于firefox下的扩展。当然不可否认的是，其实两者区别不是很大，毕竟是基于同样的Mozilla内核构建起来的。

以前虽然对firefox的扩展性有所耳闻，但也只是听说而已，没有任何研究。这几天对于ThunderBird的一些研究让我对Mozilla这个平台肃然起敬，其UI和逻辑分离，高度可扩展性的思想确实很棒。但由于资料稀少，研究的人也不多，造成像我一样的新手望而却步，一开始为了编译成功其源代码，为了实现一个最简单的“hello world”扩展都耗费了大量的时间和精力（我读各种各样的文档就花了一周的时间了，累死了），更有甚者，因为得不到资料方面的支持，放弃了对这个平台的研究。

本文的目的就是希望能为像我这样希望进入这个平台的新手们提供一个”敲门砖“。

对于Mozilla平台下的thunderbird和firefox的源代码编译问题，请参考我这篇文章：

Window下编译ThunderBird源代码 

Thunderbird和firefox的编译方法都是一样，只是参数不同而已，请记住，对我们来说最重要的是Mozilla平台。

此外，再介绍一个优秀的基于Thunderbird的扩展--Enigmail，对于我们新手来说，阅读前辈的代码不失为一个好方法。它的编译方法见我这篇文章：

Windows下编译Enigmail源代码

好了，现在开始进入正题，如何基于Mozilla平台开发一个简单的扩展呢？先来谈谈涉及到的技术：

1)XUL：它是“XML化的用户界面语言（XML User Interface Language）”的缩写，这是一种以平台无关性为目标，用来描述用户界面的语言，现在被广泛地应用于 Mozilla 平台。再有，Mozilla 本身的界面就是用 XUL 进行描述的。

2)CSS：它是“层叠样式表（Cascading Style Sheets）”的缩写，这是一种可以通过规则来控制 HTML/XUL/XML 等显示外观的语言。

上述两种技术是用来负责控制程序的界面，一个是用来描述界面，一个用来在被描述的界面上加入一些界面效果（如：字体颜色，是否透明，边框大小等）

3)DOM：它是“文档对象模型（Document Object Model）”的缩写，这是一个允许通过脚本来动态访问和更新 HTML/XML 文档的内容，结构和样式的接口。

DOM 主要用来为 JavaScritp 提供一个 HTML/XML 的文档操作接口，并且，它也可以用来操作 CSS。由于扩展的界面是由 XUL 定义的，而 XUL 只是 XML 的一个特殊应用，所以我们也可以通过 DOM 来对扩展界面进行“动态”操作（如：按钮的禁止与否，动态装载数据等）。同时，又有许多的文件和数据会采用 XML 进行存储和传输，所以创建和分析 XML 文档又显得尤为重要。通过 DOM 接口，我们可以将程序的逻辑处理部分与界面表现部分有机的结合起来。

4）XPCOM：它是“跨平台组件对象模型（Cross -platform Component Object Model）”的缩写，它很像微软的提出的组件模型技术，但它是跨平台的，即其运行环境可以不依赖于某种特定的操作系统平台。

由于 JavaScript 语言只内置了几个与本地访问无关的对象，而对于桌面开发来说，显然不能满足要求。而 XPCOM 为面向桌面的开发提供了这种可能，并且它使开发出的扩展程序可以跨平台的运行，而不用依赖于某个特殊的操作系统。只有使用 XPCOM，我们的扩展才可以做出实用的功能，没有 XPCOM，本地与远程的资源整合可以说是不可能。虽然扩展开发是用 JavaScript 来做的，但每个封装的对象或函数可能都要调用 XPCOM 对象来完成特定的功能。

5)XPConnect：一种将 XPCOM 与 JavaScript 连接起来的技术。该技术允许组件被脚本化，而且能够用 JavaScript 来进行组件的开发。

6)XBL：它是“可扩展绑定语言 （Extensible Binding Language）”的缩写。

7)RDF：它是“资源定义框架（Resource Definition Framework）”的缩写。Mozilla 使用这种文件格式来保存扩展的注册信息和描述信息等。

8)JavaScript：使用 JavaScript 开发扩展是编程语言的首选。JavaScipt 是扩展开发的核心部分，它主要用来实现程序的业务逻辑描述，起着粘合剂一样的功能。可以说，从网页下的 JavaScript 开发到扩展下的 JavaScript 开发，是一种由轻量级到重量级的转变。

      其中很多东西想必大家都熟悉，可有一点不同值得注意，在Mozilla平台下不是用这些东西来做网页之类的，而是进行桌面开发！确切地说，开发的扩展都是面向桌面应用的程序。

对于更为详细的介绍，请参阅基于 Mozilla 的扩展开发，可以说这篇文章是目前国内对Mozilla平台最为出色的技术文章了，值得我们好好研究。我这里也是大部分结合他这篇文章在thunderbird上完成开发的。

作者的一篇文章，却帮助了无数像我这样的新手，在这里特别向作者Lewis Lv致敬！

好了，现在我们开始进入”Hello World”的世界！先看看我们要实现的效果图，就是在thunderbird的菜单中插入我们自定义的菜单项.
2008042101.jpg

 项目的结构如下：

helloworld/
  chrome.manifest
  install.rdf
  chrome/
    helloworld/
      content/
        contents.rdf
        overlay.js
        overlay.xul


负责注册 Chrome 的文件chrome.manifest 的内容如下：

overlay    chrome://messenger/content/mailWindowOverlay.xul    chrome://helloworld/content/overlay.xul
content    helloworld    jar:chrome/helloworld.jar!/content/

install.rdf 的内容如下：

<?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>{241b5bc7-a8aa-44a6-a18d-3054dc6047cf}</em:id>
    <em:name>Hello World</em:name>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
    <em:creator>phinecos</em:creator>
    <em:description>”hello world demo” </em:description>
    <em:homepageURL>http://kb.mozillazine.org/Getting_started_with_extension_development</em:homepageURL>

    <em:targetApplication>
      <!-- Thunderbird -->
      <Description>
        <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>
        <em:minVersion>2.0</em:minVersion>
        <em:maxVersion>2.0.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

    <!-- This is not needed for Firefox 1.1 and later. Only include this 
      if you want to make your extension compatible with older versions -->
    <em:file>
      <Description about="urn:mozilla:extension:file:helloworld.jar">
        <em:package>content/</em:package>
      </Description>
    </em:file>
  </Description>
</RDF>

上面的<em:id>{241b5bc7-a8aa-44a6-a18d-3054dc6047cf}</em:id>中的id号是一个GUID,你可以用微软的 guidgen.exe 工具来生成的。

contents.rdf 的内容如下：


<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

  <RDF:Seq about="urn:mozilla:package:root">
    <RDF:li resource="urn:mozilla:package:helloworld"/>
  </RDF:Seq>

  <!-- package information -->
  <RDF:Description RDF:about="urn:mozilla:package:helloworld"
        chrome:name="helloworld"
        chrome:extension="true"
        chrome:displayName="Hello World"
        chrome:author="phinecos"
        chrome:authorURL="http://kb.mozillazine.org/Getting_started_with_extension_development"
        chrome:description="The Classical Demo With Hello World">
  </RDF:Description>

  <!-- overlay information -->
  <RDF:Seq about="urn:mozilla:overlays">
    <RDF:li resource="chrome://messenger/content/mailWindowOverlay.xul"/>
  </RDF:Seq>

  <RDF:Seq about="chrome://messenger/content/mailWindowOverlay.xul">
    <RDF:li>chrome://helloworld/content/overlay.xul</RDF:li>
  </RDF:Seq>
</RDF:RDF>

 

下面，让我们看一下“Hello World”的 overlay.xul 实现。

<?xml version="1.0"?>
<overlay id="helloworld-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="overlay.js"/>

  <menubar id="mail-menubar">
    <menu id="MyAboutMenu" label="About" insertbefore="tasksMenu">
        <menupopup id="menu_TestAbout">
                <menuitem id="helloworld-hello" label="Hello, world!" oncommand="helloWorld();"/>
              </menupopup>
    </menu>
  </menubar>
</overlay>

overlay.js负责定义 helloWorld 函数
function helloWorld()
{
    alert("Hello, world!");
}

好了，这个最简单的扩展就完成了，接下来就是如何安装了，在这个阶段我个人遇到了很大的阻力，浪费了许多精力在找问题上，希望朋友们别走后路，呵呵。

第一步，先要将扩展从目录形式转换为 XPI 安装包形式，所使用的打包工具就是 ZIP 压缩软件。常用的 ZIP 压缩软件有 WinRAR，WinZIP；记得必须将扩展按下面的格式进行打包：

helloworld.xpi/
  chrome.manifest
  install.rdf
  chrome/
    helloworld.jar/
      content/
        contents.rdf
        overlay.js
        overlay.xul

这里我要说一句，在用WinRAR打包时，最好一开始都打包成zip格式，再修改格式为jar或xpi,否则安装时总是会报错，我在这里就耗费了大量时间，摸索了大半天才发现这个可行的方法，

2008042102.jpg

最后当然是安装了，点击thunderbird的“工具“—”附加软件“，就可以从本地xpi文件安装这个”hello world”插件了.


   Reference:

1, 基于 Mozilla 的扩展开发

2, http://developer.mozilla.org/en/docs/Main_Page

 

3, http://enigmail.mozdev.org/download/source.php

 

posted on 2008-04-21 20:00 Phinecos(洞庭散人) 阅读(3032) 评论(37)  编辑 收藏 网摘 所属分类: Mozilla扩展

评论

#1楼 2008-04-21 20:09 ucfar      

厉害啊!PF!!   回复  引用  查看    

#2楼 2008-04-21 20:12 EdisonGG[未注册用户]

看不太懂始终不知道Firefox 使用什么开发的～～ 但是真的挺好用啊～   回复  引用    

#3楼 2008-04-21 23:34 BAsil      

支持一下   回复  引用  查看    

#4楼 2008-04-22 08:30 李战      

http://www.cnblogs.com/Emoticons/yoyocici/223852199.gif" alt="" />路过，学习！   回复  引用  查看    

#5楼 2008-04-22 10:20 小龙22[未注册用户]

国内关于Firefox扩展开发的资料太少了！

春节的时候自己写了了一个读取本地气象局天气预报显示在Firefox状态栏的扩展。   回复  引用    

#6楼 2008-04-22 12:15 Wisdom-zh      

好文. 似乎确实做 ThunderBird 扩展的人少, 不似 Firefox 的人多   回复  引用  查看    

#7楼[楼主] 2008-04-22 12:52 Phinecos(洞庭散人)      

@Wisdom-zh
其实两者没什么大的区别，只是关注firefox的人比较多   回复  引用  查看    

#8楼[楼主] 2008-04-22 12:54 Phinecos(洞庭散人)      

@EdisonGG
文中提到的技术，还有c++   回复  引用  查看    

#9楼 2008-09-02 10:48 VISELO[未注册用户]

make[1]: *** [configure] Error 1
make[1]: Leaving directory `/d/mozilla'
make: *** [/d/mozilla/Makefile] Error 2

什么意思？？？   回复  引用    

#10楼[楼主] 2008-09-02 11:18 Phinecos(洞庭散人)      

@VISELO
汗，就这么点信息我如何能猜得出？   回复  引用  查看    

#11楼 2008-09-02 14:30 VISELO[未注册用户]

安装脚本未能找到是什么意思   回复  引用    

#12楼[楼主] 2008-09-02 14:32 Phinecos(洞庭散人)      

@VISELO
你在编译什么东西？   回复  引用  查看    

#13楼 2008-09-02 14:36 VISELO[未注册用户]

错误204   回复  引用    

#14楼 2008-09-02 14:39 VISELO[未注册用户]

做你这个例子啊，我加载扩展时出现的问题   回复  引用    

#15楼 2008-09-02 15:01 VISELO[未注册用户]

请问：如果我想做一个自动首发邮件的插件（要分析邮件内容，在发送不同的邮件回去）怎么动手啊。   回复  引用    

#16楼[楼主] 2008-09-02 15:18 Phinecos(洞庭散人)      

@VISELO
仔细对照上面文章检查你的项目结构，或者自己去下个扩展看看代码   回复  引用  查看    

#17楼[楼主] 2008-09-02 15:21 Phinecos(洞庭散人)      

给你示例下载链接：http://mozilla.doslash.org/stuff/helloworld.zip" target="_new">http://mozilla.doslash.org/stuff/helloworld.zip，自己对照看看官方入门文章http://developer.mozilla.org/en/Building_an_Extension" target="_new">http://developer.mozilla.org/en/Building_an_Extension   回复  引用  查看    

#18楼[楼主] 2008-09-02 15:23 Phinecos(洞庭散人)      

@VISELO
先研究TB的代码   回复  引用  查看    

#19楼 2008-09-03 14:07 VISELO[未注册用户]

上面的<em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>中的id号是一个GUID,你可以用微软的 guidgen.exe 工具来生成的。
好像不是吧，这个是
Thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6}
是不是记事本也可以写这些代码保存啊？   回复  引用    

#20楼 2008-09-03 14:08 VISELO[未注册用户]

Firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
Thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6}
Nvu {136c295a-4a5a-41cf-bf24-5cee526720d5}
Mozilla Suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640}
SeaMonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
Sunbird {718e30fb-e89b-41dd-9da7-e25a45638b28}
Netscape Browser {3db10fab-e461-4c80-8b97-957ad5f8ea47}
Flock Browser {a463f10c-3994-11da-9945-000d60ca027b}

平台指定   回复  引用    

#21楼 2008-09-03 14:20 VISELO[未注册用户]

204错误是什么？？
安装脚本未能   回复  引用    

#22楼[楼主] 2008-09-03 14:30 Phinecos(洞庭散人)      

@VISELO
恩，这个是笔误，我指的是上面那个GUID,安装问题我不清楚，应该是你的项目结构不正确，我已经提供给你一个正确的安装包了，自己对照，再就是打包时的方法要注意，我的文章中有说明，最后一点是注意版本问题   回复  引用  查看    

#23楼[楼主] 2008-09-03 14:32 Phinecos(洞庭散人)      

如果再不行的话，把你的项目打包发给我，phinecos@163.com,我帮你看看   回复  引用  查看    

#24楼 2008-09-03 15:14 VISELO[未注册用户]

我已经发过来了谢谢帮我看看   回复  引用    

#25楼[楼主] 2008-09-04 13:17 Phinecos(洞庭散人)      

@VISELO
没有收到邮件，确认你发送的地址是否正确   回复  引用  查看    

#26楼 2008-10-18 21:22 Janja      

最近发现个问题，如果做了安装了两个名称不同但功能一样的扩展包，可能会出问题：
比如我安装了您的 helloworld.xpi，然后我改下名称，比如helloerror.xpi( <menuitem id="helloworld-hello" label="Hello, world!" oncommand="helloWorld();"/>
这个改label,然后改helloworld()对应的函数),最后安装下,你就会发现两个扩展alert出来的都是一样的数据,字典排序排后边的不会弹出来   回复  引用  查看    

#27楼[楼主] 2008-10-19 10:51 Phinecos(洞庭散人)      

扩展是基于内存融合的，大家都要融合到一处地方（只有这么一个位置），当然会抢占式啦，   回复  引用  查看    

#28楼 2008-10-28 22:20 xman256[未注册用户]

洞庭散人你好，我是Mozilla的新手，计划做一个TB的插件。仔细阅读过您的文章，例子也顺利实现了，不过我想问一下代码怎么阅读呢？我解压开完全看不明白（似乎很多CVS的文件夹），是不是需要工具来看？如果是的话用什么工具呢？
另外，文章的例子中我们重载了一个XUL文件“chrome://messenger/content/mailWindowOverlay.xul”
我在TB中找到了它，也看懂了，但是问题是你事先是如何知道这个.XUL文件的呢？请指教！十分感谢！！
  回复  引用    

#29楼[楼主] 2008-10-29 09:29 Phinecos(洞庭散人)      

@xman256
没用什么工具，直接记事本打开一个个文件看，把代码基本浏览了一遍   回复  引用  查看    

#30楼 2008-11-06 13:37 explorewen[未注册用户]

确实如此，入门的文章很少，Lewis的那篇helloworld可称入门经典!   回复  引用    

#31楼 2009-03-14 10:38 my_name[未注册用户]

Hello World 1.0 无法被安装，因为它与 Thunderbird 3.0b2 无法兼容

需要使用Thunderbird那个版本！   回复  引用    

#32楼[楼主] 2009-03-14 15:40 Phinecos(洞庭散人)      

@my_name
用的是TB2.0.0.*,下面这段代码说明了
<em:targetApplication>
<!-- Thunderbird -->
<Description>
<em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>
<em:minVersion>2.0</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>
   回复  引用  查看    




发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1164466




相关文章:

相关链接:

导航

统计

与我联系

留言簿

我参与的团队

随笔分类(738)

随笔档案(608)

相册

常去的站点

我的好友

我的站点

Google搜索

  •  

积分与排名

最新评论

阅读排行榜

评论排行榜

60天内阅读排行