提高firefox扩展开发效率

本文介绍一些技巧和开发扩展中使用的工具，主要参考：https://developer.mozilla.org/En/Firefox_addons_developer_guide的第五章（Chapter 5: Let's build a Firefox extension ）。如有不清楚的地方可以参考原文，以及在我的博客中寻找这篇文章的翻译版。

创建开发者profile

详细的资料可以参考：设置扩展开发环境。为了将平常使用的profile和开发调试使用的profile区分开，强烈建议开发之前创建一个开发者profile。
创建开发者profile：关闭所有运行着的Firefox程序，运行->Firefox –p(XP中直接在运行中输入，WIN7中开始->所有程序->附件->运行)，新建一个dev用户配置文件，我将其保存在E:\firefoxProfile\DEV中。如图示：

使用开发者profile打开Firefox。当然可以用前面那种方式打开profile管理器选择启动Firefox的profile。但通常是建立一个bat文件，其内容如下：
set MOZ_NO_REMOTE=1
start "" "D:\Program Files (x86)\Mozilla Firefox\firefox.exe" -P dev
set后面的参数是为了在用这个profile打开之后不会影响Firefox用其他profile运行。start后面的路径表明Firefox的安装路径， -P后面则是需要使用的profile名称。将上述内容保存为dev.bat，这样如果需要用dev profile运行Firefox则只需双击dev.bat即可。
当然还可以为这个bat文件创建一个快捷方式放在你认为方便的位置。

安装辅助开发的扩展

用刚创建的profile运行Firefox，发现Firefox默认会安装一些扩展，如下图：

由于我们这个profile是用来开发扩展的，所以我选择将除附加组件管理器之外的扩展全部移除。
然后建议安装以下几个扩展：
venkman
DOM Inspector
Firebug
当然你也可以有其他选择，上面这三个扩展我使用过DOM Inspector和Firebug而venkman我没有使用过，是用来调试JS的。这些扩展的功能可以找到相关介绍的资料，在此不赘述。

选择优秀的代码编辑器

好了，到这里才是本文的重点内容，前面的你都可以在其他地方找到相关陈述，但这一节在其他地方却不一定能够找到一样的内容。
我所说的优秀的代码编辑器仅仅针对Firefox扩展开发，我要介绍的是editplus，当然你也可以选择其他你认为方便的代码编辑器。Firefox扩展开发中需要编辑的代码主要有两种，一种是XUL文件，另外一种是JavaScript文件。要提高编辑代码的效率，需要代码编辑器能够提供自动完成功能，并尽量减少按键输入，为代码着色也是很实用很重要的功能。Editplus就能够做到这些，因此我认为它是Firefox扩展开发中的一款优秀的代码编辑器。下面我对如何让editplus实现自动完成和减少我们的按键输入。
介绍两个部分，首先介绍如何对editplus进行设置以使其能够完成我们需要的功能。然后介绍如何让editplus按照我们的需求，更加适应我们自己的习惯。

设置editplus

首先，假设我们已经有了XUL文件相关的userfile，运行editplus，如下图，选择工具\首选项。

弹出参数选择对话框，

选择设置&语法，然后点击“添加”按钮，添加XUL文件类型。

输入文件类型描述，点击确定。

输入文件扩展名为XUL。并按上图分别选择XUL文件对应的语法文件、自动完成文件，以及素材。
下面可以根据需要设置模板。如下图：

设置完成之后，我们来看看如何使用这些方便的功能。
选择文件->新建->XUL（按上面设置了模板之后，新建里面多出一个XUL）。如下图，新建了一个如下所示的XUL文件：

在上面的素材默认会选择XUL（tags），需要其他素材时可以点击下拉列表选择其他素材。接下来，体验一下方便快捷的自动完成功能，如下图，在素材窗口中找到window，双击则在光标处输入了window。

光标停在window的右边，然后按下空格，结果如下图：

自动将window补全成了：
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
</window>
且光标停在window开始标签的右括号前面，方便对window的id、title等属性进行设置。
注：不管是自动补全还是素材文件都可以指定在自动输入之后光标的位置。

Editplus的userfile

Editplus的userfile包括语法文件，素材文件以及自动完成文件，我将模板文件也当做userfile。Editplus的userfile可以在到这里去下载：http://www.editplus.com/html.html，前面使用到的与XUL有关的userfile我已经提交到了这个网站，有需要的可以自行下载http://www.editplus.com/dn.php?n=xul_ctl_acp_stx.zip也可以去下载其他你需要的userfile。
关于editplus的特性介绍这里给出两个链接，想深入了解的可以去看看：
http://icodon.com/the-experience-of-using-editplus-brief.html
http://polaris.blog.51cto.com/1146394/372353
如下图，（;开始的一行是注释），以#+keyword开头，#结尾。图中已经说明得比较清楚了，不过多的阐述。学写userfile最好的方式就是打开一个已经存在的userfile，仿照别人的userfile写，语法很简单。

利用editplus开发扩展

Firefox扩展的开发，所涉及到的文件，除了图像文件之外，其他文件都只需要一个文本编辑器就可以打开并编辑。下面为扩展开发者介绍一个editplus中非常不错的功能——建立工程。
打开editplus，在工具菜单前面就是工程菜单。选择工程->编辑工程..弹出如下工程对话框：

点击添加工程，以添加XUL userfile为例，输入XUL userfile，然后点击上图中的添加文件(根据不同需求也可以添加目录，不过我个人感觉添加文件比较实用)，可以设置一下目录名称(无表示只显示文件名、从层1表示完整路径，从层2表示从目录第二层开始显示，以此类推)。如下图：

添加工程之后，工程->选择工程->就能看到我们创建的工程，选择这个工程，接下来在工程菜单下面就会依次列出我们为这个工程添加的文件，选择某个文件就可以打开并进行编辑了。

要提高扩展开发的效率其实根本上还是依赖于对各种技术掌握的掌握程度，使用工具仅仅是辅助性的。下一篇文章我将会详细介绍如何开发一个简单的Firefox扩展。

注：本文所使用的editplus的userfile文件也可以到我的资源中下载。免积分的。