好久没有写Firefox插件开发的相关文章了，自己总结了一下，主要有这几点，一，自己差不多把Firefox插件开发的过程掌握的一一二二了，所以很少再写文章了，二，没时间写，三，懒得写。其实我觉得最主要的原因还是一和三，毕竟我在写了这篇文章之后，大部分的问题都可以直接通过联系官方人员去了解了，所以我不会的问题，自然就直接和官方人联系，也很少自己弄很长时间弄出一个问题，然后感叹的洋洋洒洒的写一篇文章。其实我也说不上这是好是坏。
OK，今天要说的就是Firefox扩展区修改页面的内容。平常我们做Firefox扩展的时候，大都是通过XUL去写一个按钮或者窗口之类的，但是我们没有更改过网页里面的内容。因为如果直接使用document.getElementById的话，我们取到的是Firefox里面的一个元素（不了解的看这里），而如果我们要取到页面里面的HTML DOM的话，就要用另一种方式了。
//取到的是当前tab里面的HTML代码
var body = content.document
我们获取到页面的元素是干嘛的呢，当然是修改的了。比如我们像Firebug一样，可以修改节点，删除掉节点，增加一个节点，是不是很酷？所以我们只要获得到了DOM对象，就可以轻易的操作DOM了。
首先我们选中网页里面的一段话，这个时候我们想要对选中的地方进行操作，例如插入，删除等等，怎么办，我们首先可以获取Selection对象，代码如下。
var selection = window.content.getSelection();
if(selection!=null&&selection.toString()!="")
{
//Do something
}
我们找到选中的内容之后，判断选中的是否为空或者怎样，如果不为空就继续做我们想做的事情，如果你已经知道Firefox插件开发，可以看这个对象的作用，方法和一些属性。
如果我有这样一个需求，我们选择了一段文字，然后想直接搜索文字。这个时候我们就像要是有一个小的弹出的泡泡就好了，如下图所示。
那这样我们怎样实现呢。首先我们可以分为下面几个步骤。
1.选中文字，判断是否选中。
2.在选中文字附近加入span标签，并设置为float，并绝对位置定位。
3.添加相应的内容到HTML文档中。
这三点中，第一点我们已经解决了，这个时候我们就需要做第二点，也就是当你选中一段代码后，我们弄一个小的Popup出来。这个地方我们要注意一下。我们在“abc”中选中b之后，我们就在“abc”的“b”后面添加一个span元素，就成为了“abdc”，这个时候我们只要将d的样式设置为float并绝对定位，就可以飘到上面去了，而实际上是一行HTML代码。这里首先要理解。所以我们就写一段这样的代码。
//创建一个DOM（document.createElement）
//selection是选中的文字
var node = createNode(selection);
//get the index and range
var lastRange = selection.getRangeAt(selection.rangeCount - 1);
var newRange = document.createRange();
newRange.setStart(lastRange.endContainer, lastRange.endOffset);
newRange.insertNode(node);
createNode方法很好写，就是返回一个document.createElement创建的对象，我们这里可以创建span之类的，任何对象都可以。
创建完之后我们就讲我们的DOM元素插入到HTML文档中去了。不过值得注意的是，上面这段代码一般都是写在mouseup事件中的，当我们选中一段内容时，实际上就是鼠标按下=》移动=》鼠标释放着3个步骤，按下，移动我们都可以不用写，当鼠标释放的时候，我们就要获取选中的内容并创建一个DOM插入到选中的文本的最后面即可。
其实这里思路不是很难，不过有很多小细节要注意，如果你真的要实现这样的功能的话，建议自己亲手做一下，否则真的很难掌握。估计我后面写的文章大多数人也是看的云里雾里，如果有什么问题直接mail联系吧。：）
Firefox Addon
firefox, 扩展开发, 修改, 内容, 选择, selection, extension