今天看到一个初中朋友的留言，说要做一个Firefox插件，用于分享Twitter的东西，我大概模拟了一下需求，应该就是快速分享页面或者选取的内容到Twitter吧，其实逻辑和Google搜索一样，在网页上选取内容，右键点击，可以看到Search Google for “XXX”，OK，我们这里就暂时实现以下这个思路。
如果你对Firefox插件开发还没弄清楚，建议先看。
读了这几篇文章应该对Firefox插件有一些基本的了解了，OK，我们就需求和程序谈谈，如果需求是我假设的那个需求的话，我们只需要做下面几个操作。
- 写一个XUL的菜单。
- 用户打开菜单显示XUL。
- 点击或打开菜单执行相应的事件。
我们规划了一下基本的程序走向之后，我们就可以一步步的来实现，首先先写XUL菜单。
<?xml-stylesheet href=”chrome://{appname}/skin/overlay.css” type=”text/css”?>
<!DOCTYPE overlay SYSTEM “chrome://{appname}/locale/overlay.dtd”>
<overlay id=”{appname}-overlay”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<script src=”overlay.js”/> <popup id=”contentAreaContextMenu”>
<menuitem id=”searchMenuitem{appname}”
label= “Share Web to Twitter”
insertbefore=”context-sep-selectall”
/>
<menu insertbefore=”context-sep-selectall” label=”Tester”>
<menupopup id=”searchicons{appname}”>
<menuitem id=”tester” label=”Do Something”>
</menuitem>
</menupopup>
</menu>
</popup>
</overlay>
OK，这里我可以简单的说一下，前面都是XUL的声明和结构，overlay.js是调用js，和HTML一样，后面就是XUL控件了，这里我们直接写popup就添加了菜单，但是值得注意的是，id必须为上面代码里面写的，只有些成这样，Firefox才知道你定义的是右键菜单，而不是其他地方的菜单。
这里我添加了一个menuitem和menu，至于这两个控件如何组成，可以看官方参考（英语）。
我们XUL写完了之后，就可以写js文件了。由于这里我觉得各位JS都可以读懂，就在程序里注释了，不一段段的讲解了，代码如下。
{
load:function()
{
//add event listener to menu
//添加事件，当用户打开邮件菜单的时候执行相应的方法
var menu = document.getElementById(‘contentAreaContextMenu‘);
menu.addEventListener(“popupshowing“, mainLoad.findSelectWords , false);
},
findSelectWords:function()
{
//find the words user selected
//查找用户选中的内容并判断
var selectText = window.content.getSelection();
if(selectText == “”)
{
//if nothing is selected
//Share the web or hide the menu
}
else
{
//change the menu to “Share XXX to Twitter”
//alert(‘You make it!’);
}
}
}
//给浏览器窗体添加加载事件
window.addEventListener(“load“, mainLoad.load , false);
上面的代码很简单，我也添加了足够多的注释。这里的主要思想可以归纳为。添加了XUL到Firefox里之后，我为右键菜单打开添加了事件，当用户打开右键菜单的时候，会响应这个事件。而这个事件的作用就是，用户打开菜单了，我看用户选择的内容，如果选择了内容我们就做一件事情，如果没有选择内容就做另一件事情，这样就满足了我们的基本逻辑。
如果你需要在菜单上添加事件，如onClick之类的，可以直接在XUL里面填写，和HTML一样，没有多大区别。
示例代码
[...] Firefox Add-on – 分享当前页或内容？ [...]