XUL开发手册.doc

Firefox开发手册一、 扩展的基本结构一般扩展是一个后缀为.xpi的文件，其实这个文件就是zip格式的压缩包，压缩了一个扩展所需要的所有目录和文件，基本的目录结构如下：extension.xpi:/install.rdf/components/*/components/cmdline.js/defaults/defaults/preferences/*.js/plugins/*/chrome.manifest/chrome/icons/default/*/chrome/chrome/content/(1) install.rdf这个文件描述了扩展安装所需要的信息，包括了扩展的标识、版本、适用的应用程序、作者等。本身是一个rdf文件。基本的install.rdf示例如下： 1.0 2 ec8030f7-c20a-464f-9b0e-13a3a9e97384 1.5 2.0.0.* Hello Extended test galeki /galeki具体代码解释如下：68行是标识信息，第6行的段是此软件包唯一的标识，可以是作者的email，目的是唯一标识此软件包。第7行是目前的版本。第8行的，值为2代表我是扩展，4代表我是主题，这里是扩展，所以值为2。1016行的段描述了软件包针对的应用程序，12行那段古怪的表明此扩展是针对firefox的，而不是thunderbird、sunbird，所以，只要是针对firefox的扩展，此id的值都不变。1314行描述了此扩展适用的firefox版本。1820行描述了扩展的基本信息，从标签的名称上就可以看出意思，扩展管理器中显示的扩展信息，就是来源于这里。(2) charome.manifest这个文件的作用是告诉fierfox扩展的content、locale、skin文件的位置。例如： content hello chrome/content/简单来说，就是指明，hello这个扩展的content类型文件，在chrome目录的content子目录下。locale的定义稍有区别： locale hello zh-CN chrome/locale/zh-CN/指明hello这个扩展的zh-CN，也就是中文的locale，在chrome/locale/zh-CN/目录下。skin的定义和locale相似： skin hello classic/1.0 chrome/skin/classv1/指明hello这个扩展，名叫classic/1.0的skin，在chrome/skin/classv1/目录下。(3) chrome目录chrome是扩展最重要的一个目录，所有描述扩展的文件，称为chrome。chrome一般包括3类文件：content、locale、skin。content：描述扩展界面、外观的定义文件，比如按钮布局，对话框，通过XUL文件和js文件来设定，后面我们可以看到XUL的介绍。locale： 描述多语言信息的文件，一般是xml的dtd文件。skin： 定义界面样式的css文件和所需要的图片文件。一个典型（并不绝对）的chrome目录下包含这么几个子目录：/chromecontent/locale/skin/三个子文件夹存放了扩展对应的content、locale和skn类型的文件。(4) 二、 用XUL创建扩展在Firefox中，所有的界面都是基于XUL文件描述的，XUL本身是一个XML文件。就连Firefox本身，也是基于XUL的，可以在firefox的地址栏中敲入： chrome:/browser/content/browser.xul，看看会出现什么情况吧。（1） 创建一个简单的窗口示例一个简单的XUL文件示例：把上述的代码保存为test.xul，然后在firefox的“文件” - “打开文件” 中打开这个文件，就可以看到（图一），或直接拖到firefox中。图一 一个简单的窗口示例实际上，上面的XUL文件只是每个窗口的基本框架，所以什么东西都没有。第1行是XML文件的基本表示，第2行引用渲染窗口控件的样式表文件，这里我们先跳过对这行的解释，只要知道“chrome:/global/skin/” 引用的是firefox全局默认的样式表即可。第3行的元素，就是窗口的根元素，你可以把它想象成HTML中的元素。属性id的值可以随便取，和HTML中的id属性相同，必须要保证全局唯一，因为之后我们要通过id来引用每个窗口。title属性就是窗口的标题，xmlns是名称空间，说明之下的内容是XUL。窗口中所有的内容，都要放在和之间，就像HTML中所有的元素必须放在和之间一样。（2） 控件的使用常用的应用程序具有的窗口控件（按钮、单选复选框、文本输入框、下拉单），在firefox的窗口中都可以实现，只不过不同的窗口控件在XUL中变成了不同XML标签，控件的属性（大小、文本、排列方式）变成了标签的属性值而已。一个简单按钮控件使用示例：按钮在XUL中就是这个标签，label属性为按钮上显示的文字。打开test.xul，添加下面的代码： 三、 XUL逻辑处理在XUL中，驱动控件的方法和HTML基本相同，并且，也是通过javascript来完成，在XUL里，最有用的事件属性是oncommand，当控件被激活时就会出发这个事件，比如按钮被点击，单选复选框被点击，菜单项被点击等等。在XUL中，负责事件处理的javascript代码，可以像上面那样内联在xml标签中，也可以像HTML那样，从外部的js文件中引用。（1） 内部引用javascript（如图二）在XUL文件中，用标签引用外部的js文件： button.js 文件：function show_ok() alert(我被点击了！);图二（2） 外部引用javascript在XUL文件中，用标签引用内部的js文件： function who_am_i(event) message = 我是 + event.currentTarget.tagName + 。 你点击了 + event.target.tagName; alert(message); 图三四、 测试（1）使用压缩工具将extension文件夹压缩成zip文件，注意有些工具会将本文件夹加入压缩包，这里要求压缩包解开之后应该是extension下面的两个文件和一个文件夹，而不是extension文件夹。然后将后缀名改