在上一节中我们了解了一下XUL和Firefox插件的UI的编写方法，熟悉XUL插件的UI的编写方法还不够我们编写一个多语言和可扩展的插件。在编写插件之前，肯定有很多疑问，最最基础的原因还是因为对Firefox插件的不了解，所以现在我们先看Firefox插件项目中的组成结构。对于组成结构，我画了下面这个图。

在上图中，我勾勒了3个文件，这三个文件彼此对应展现一个扩展或者窗口，其他的文件也基本上和这个结构相同，这个结构包括有：

• overlay.xul：主窗体界面，UI，也是我们的XUL代码编写的位置，主要用于UI的呈现。
• overlay.js：主窗体的js代码，主要用javascript编写事件的响应。
• overlay.dtd：多语言包，主要在local文件夹下。

当然，这个结构还应该算上在skin文件夹下的overlay.css，用于样式控制。

在我们了解了一个扩展或者窗体的基本结构后，我们就可以发现其实扩展的开发和HTML网页的制作没有什么很大的区别（当然区别还是很大的，主要在解释和引擎上，而在思路上是没有很大的区别的），XUL文档可以看作是HTML文档，而js文档可以看作是HTML后面的js文档，而css我就不用多说了，样式布局，在Firefox的扩展中同样可以使用css进行样式控制。我们看一下overlay.xul给我们提供了什么。

从上面的代码我们可以看到，overlay.xul文档和XML文档很相似，但是也和HTML文档很相似，首先，上面3行代码的申明是必须的，比如我们指定了css文件，指定了dtd语言包。在overlay标签中（相当于body标签），我们可以编写XUL代码（前面的我们讲过），然后就会在浏览器中呈现，在主要的标签内，我们可以申明我们想要使用的js文件，例如这里我使用了overlay.js，selLocal.js等js文件。

值得注意的是，在扩展加载的时候，默认情况下并不会加载一些方法，在HTML有onload方法，虽然Firefox的扩展也支持，但是在默认情况下是不支持的，我们必须添加以下代码让扩展在加载时支持我们需要的方法。

注意这里的type必须是application/x-javascript，虽然这样，但是Firefox同样支持标砖的javascript，所以很多标准的javascript方法都可以直接拿过来用。

现在我们再看dtd文件，dtd文件是语言包文件，我们可以定义一个字符串（键值对应的字符串），然后使用，例如如下代码。

当我们在overlay中调用的时候，我们可以直接使用{appname}调用我们值{appdisplayname}。当然，这是一个系统自动生成的，如果我们需要自定义的话，可以按照这个方法自定义语言，代码如下。

当我们需要使用的时候，我们可以按照&close.label;的方法来使用，只要在相应的XUL代码中嵌入这个字符串，在运行的时候就能够显示相应的字符，这在多语言上面是非常好的，因为我们可以直接选择浏览器的语言，扩展的语言也会相应的更改。例如上面代码要适应中文化，我们也可以写成。

在扩展的开发中，还有js文件和css文件，其编写方法和普通的没什么区别，例如js文件可以写成这样。

在使用的时候我们直接使用setLocal.方法名称（或变量名称）即可访问方法和变量，和普通的没什么区别，css也是一样，这里我就不做演示了。但是值得注意的是，css并不是所有的都会支持，当然解析是没有问题的，但是例如背景颜色，在按钮的情况下是不支持的，在窗口的情况下是支持的。而同样image属性，因为按钮有image属性，所以css的image属性很多情况下也不会起作用。

在netbean里面开发扩展，有一个好处就是能够自动的创建开发项目，而不太好的地方就是debug非常不好，而且netbean还有很多bug，而Firefox开发的过程中，如果有错误，是不会提示错误也不会有任何显示的，如果UI制作错误，根本就不会显示，这个时候找错误就非常难了，所以在开发过程中，尽量保证开发的代码是很可读的而且很好辨认的（例如缩进什么的），这样就方便了我们的开发以及debug。