如何快速开发Firefox插件

这期内容当中小编将会给大家带来有关如何快速开发新浪微博的Firefox插件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

Firefox的插件机制

对于一个Firefox插件来说，我们首先需要了解的它的组织结构。打开一个Firefox插件工程，你一般会看这么几个元素：chrome文件夹，defaults文件夹，chrome.manifest, install.rdf。

我们先从install.rdf说起，相比从文件名你就明白了这个文件是要干什么的。没错，这个文件就是Firefox插件的安装文件。

<!--?xml version="1.0"?-->  <RDF xmlns:em="Http://www.mozilla.org/2004/em-rdf#">             <DESCRIPTION about="urn:mozilla:install-manifest">          <EM:ID>flashcard@gmail.com</EM:ID>          <EM:VERSION>0.7</EM:VERSION>          <EM:TYPE>2</EM:TYPE>          <EM:NAME>flashcard</EM:NAME>          <EM:DESCRIPTION>Post the selected Word to Sina weibo.</EM:DESCRIPTION>          <EM:HOMEPAGEURL>https://feihe.cnblogs.com</EM:HOMEPAGEURL>                  <EM:ICONURL>chrome://flashcard/skin/icon.png</EM:ICONURL>                    <EM:CREATOR>Fei He</EM:CREATOR>           <EM:TARGETAPPLICATION>              <DESCRIPTION>                  <EM:ID>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</EM:ID>                  <EM:MINVERSION>3.0</EM:MINVERSION>                  <EM:MAXVERSION>4.0.*</EM:MAXVERSION>              </DESCRIPTION>          </EM:TARGETAPPLICATION>      </DESCRIPTION>  </RDF>

里面也就是对于你的Firefox插件的一些描述信息，其中比较关键的两个, 在根节点description下的是你的Firefox插件的id，也就是说这个东西必须唯一(至少在你的Firefox所有插件中唯一)，另一个位于的下的则是Firefox的id，这个是不能修改的。再就是和，它们用来描述你的Firefox插件对于Firefox版本的兼容性。

接着我们来了解defaults，一句话defaults就是你的Firefox插件的preferences的default设置。

对于一个Firefox插件最核心的部分就是chrome.manifest和chrome文件夹。chrome.manifest有点像.net的project文件，基本上就是对于整个Firefox插件所有元素的位置信息，而Firefox本身就是通过这个这个manifest来定位具体的元素。那么一个Firefox插件会包含那些元素呢?打开chrome.manifest你就一目了然了。

overlay chrome://browser/content/browser.xul chrome://flashcard/content/overlay.xul

content flashcard chrome/content/flashcard/

skin flashcard classic chrome/skin/classic/flashcard/

locale flashcard en-US chrome/locale/flashcard/en-US/

style chrome://global/content/customizeToolbar.xul chrome://flashcard/skin/skin.CSS

这里面的结构基本都是行结构的，每一个行的头就是具体的Firefox插件元素名称，而后面的是告诉Firefox去那个位置查找这个元素。而这其中包含了这么几个元素：

◆ overlay: 指向你的Firefox插件的一个UI元素，包括contextmenu，toolbar，navigator bar之类。在上面的manifest中你看我这里指向了一个后缀名是xul的文件，其实它的全称是Xml User Interface。顾名思义就是使用xml的格式来描述UI。

<!--?xml version="1.0"?-->  <!--?xml-stylesheet href="chrome://flashcard/skin/skin.css" type="text/css"?-->   <OVERLAY id=flashcardOverlay>       <SCRIPT type=application/x-javascript><!--mce:0--></SCRIPT>      <SCRIPT type=application/x-javascript><!--mce:1--></SCRIPT>      <SCRIPT type=application/x-javascript><!--mce:2--></SCRIPT>          <SCRIPT type=application/x-javascript><!--mce:3--></SCRIPT>       <SCRIPT type=application/x-javascript><!--mce:4--></SCRIPT>      <SCRIPT type=application/x-javascript><!--mce:5--></SCRIPT>      <SCRIPT type=application/x-javascript><!--mce:6--></SCRIPT>            <MENUPOPUP id=contentAreaContextMenu>          <MENUSEPARATOR id=separator_flashcard>          <MENUITEM id=menuitem_flashcard_add class=menuitem-iconic image="chrome://flashcard/skin/word.png">      </MENUITEM></MENUSEPARATOR></MENUPOPUP>  </OVERLAY>

上面是我用的一个overlay.xul, 我这里是给Firefox的contextmenu加了一个新的menuitem，并使用separator和原有的menuitems分隔起来。这里的文件名是可以随意取的，那是你起的名字必须在chrome.manifest中应用。到这里很多人好奇，那么你加的menuitem相应的行为在那里呢?细心的你也许发现我这个xul中引用了一些javascript，而对于我们menuitem，Firefox提供了2中方法去关联行为：第一种就是在control的oncommand中直接指定control的行为;第二中是javascript中使用document.getElementByID来获取control从而绑定行为：

<DIALOG id=dialog_login title=FlashCard persist="screenX screenY width height" windowtype="DialogWindowType" buttons="accept,cancel" onload="window.sizeToContent();" ondialogaccept="return login();">    </DIALOG>

document.getElementById("menuitem_flashcard_add").addEventListener("click", function(event){}, false);

并且，我也在这个文件中指定了css文件。其实对于xul文件中javascript和css的使用和html都基本一致。

◆ content:　就是你的Firefox插件的核心，包括javascript脚本和XUL

◆ skin：即使皮肤，你可以在给你的插件做不同的皮肤，我的mainifest中指定了我使用classic的皮肤，所以我在skin文件夹下就应classic的文件夹来对应。

◆ locale：国际化，对于我们Firefox插件中需要需要国家化的UI control,　我们可以使用它的label属性，同时在chrome.manifest中指定的culture文件夹下定义dtd文件来对应，例如： overlay.xul中的control定义：

        <MENUITEM id=menuitem_flashcard_add class=menuitem-iconic   image="chrome://flashcard/skin/word.png" label="&flashcard.menuitem.label;"> </MENUITEM>

dtd文件的定义：

<!--ENTITY flashcard.menuitem.label "Post to flashcard"-->

它们之间使用control的label属性关联，而overlay.xul具体和chrome.manifest指定culture文件夹下的那个dtd文件关联，你可以看到在我的overlay.xul中有这么一句定义：

◆ style: 也就是overlay的一些样式，比如css。

你的Firefox插件有了UI，也有了相应的行为和样式，那么你还需要什么呢?需要存储，也就是你需要存储一些preferences信息或者其他的比如我这里我需要存储新浪微博中用户授权通过之后获得的Oauth_token的相关信息。Firefox对于存储提供了很多方式，你可文件存贮在特殊位置，或者使用sqlite这种肖的文件数据库。另外一种最简单的也就是我采用的就是preferences的存贮。对于Firefox插件，你可以在你的install.rdf中注明你的preference文件，这样你可以让用户使用的preference文件做一些设置，并保存。而我这里我指希望使用preferences来存贮，所以我并不希望用户看到它，那么我就不需要在install.rdf中注明。

preference文件也是一个xul文件，所以你也可以应用javascript和css，来对于你的preference中的control进行行为的绑定和样式的渲染。我这里的preference如下：

<!--?xml version="1.0"?-->  <!--?xml-stylesheet href="chrome://global/skin/" type="text/css"?-->   <PREFWINDOW>      <PREFPANE label="Flash Card Preferences">      <PREFERENCES>          <PREFERENCE id=pref_access_token name="Sina.WeiBo.oauth.access_token" type="string">          <PREFERENCE id=pref_access_token_secret name="Sina.WeiBo.oauth.access_token_secret" type="string">      </PREFERENCE></PREFERENCE></PREFERENCES>  </PREFPANE></PREFWINDOW>

而这其中的preferences节点中的内容便是用来做preference存贮的，你可以像我一样通过

Components.classes["@mozilla.org/preferences-service;1"].getService  (Components.interfaces.nsIPrefService).getBranch("Sina.WeiBo.")

来获得所有name前缀为Sian.Weibo的preference，然后调用它的getCharPref('oauth.access_token')来获取值，或者通过setCharPref('oauth.access_token')设置值，对于preference，MDN上有详细的api介绍。对于在preference中引用javascript比较tricky的一点就是如果在你preference中使用prePanel，那么javascript的引用代码一定要在prePanel后面，否则你的prePanel就什么都看不到了。

最后一点，有些时候也许你希望你的Firefox插件在完成某些行为之后给用户一个notification，在Firefox3中你可以使用普通的notification或者alert，而在Firefox4中你可以使用popupNotification，效果非常炫，而且还可以指定图片和相应的action，使得用户在得到这个notification之后可以做进一步的行为。示例如下：

PopupNotifications.show(gBrowser.selectedBrowser, "flashcard-add",          '"'+ selectedWord +'" 已经成功加入你的单词本',          null,           {              label: "确定",              accessKey: "D",              callback: function() {              }             },          [              {                  label: "Reset",                  accessKey: "R",                  callback: function() {                      Browser.Preferences.clearUserPref("oauth.access_token");                      Browser.Preferences.clearUserPref("oauth.access_token_secret");                  }                 },          ]);

而指定图片则要在css中

.popup-notification-icon[popupid="flashcard-add"] {      list-style-image: url("chrome://flashcard/skin/icon.png");  }

这里是我在快速开发一个Firefox插件中获得知识，如果你希望更详细的知识还是需要参考MDN。写到这里发现篇幅有点长，还是决定分为上，下两篇。下篇来讲Sina WeiBo的Oauth授权机制。

上篇主要讲了讲Firefox插件的机制，接着我们来看快速开发一个Firefox插件中我面临的第二个问题----Oauth授权(开始开发的时候只是想着快速开发完成，当然授权这块最快的方案自然就是basic auth，但是新浪微博6月1号以后就不支持basic auth了。)。

Oauth的官网上说是这样描述它的用途：

An open protocol to allow secure API authorization in a simpleand standard method from desktop and WEB applications.

在Oauth的官网上对Oauth有详尽的描述以及不用语言对于Oauth的实现，对于我的开发我需要了解的其实非常简单.

首先对于Oauth有三个url是必须了解的：

◆ Request Token URL

◆ User Authorize URL

◆ Access Token URL

另外，我们还需要了解针对这些URL相应的一些参数：

◆ oauth_consumer_key

◆ oauth_consumer_secret

◆ oauth_signature_method

◆ oauth_signature

◆ oauth_timestamp

◆ oauth_nonce

◆ oauth_version

具体这些URL和参数有什么作用呢?我们结合新浪微博来说。对于开发一个新浪微博的应用，你必须在新浪微博申请一个app key和app key secret, 有了它们我们就可以开始了。新浪的Oauth是这样一个流程：

1. 第一次你需要做的是Request Token URL，对于新浪微博就是http://api.t.sina.com.cn/oauth/request_token。接着就是请求的参数了，这个时候你需要把你申请的app key作为oauth_consumer_key,　而把你的app key secret作为oatu_consumer_secret。oauth_signature_method就是你的加密算法，oauth支持 HMac-SHA1， RSA-SHA1， PLAINTEXT这三种算法，而新浪微博指定需要HMAC-SHA1，所以对与oauth_signature_method我们这里就是HMAC-SHA1了。oauth_timestamp就是请求的时间戳，这个时间戳的范围是现在1970 00:00:00 GMT的秒数，而且每次请求的时间戳必须大于上次的。oauth_nonce就是随机生成的一个字符串，就是为了防止重复请求。oauth_version现在只能是1.0。最后我们需要对所有参数使用oauth_signature_method指定的加密算法加密作为oauth_signature。对于请求的参数，我们有两种绑定方式：Get: 拼URL;Post:　放在Http heads里。 有了URL和参数我们就可以发起我们的请求。当新浪微博接受我们的请求检查合法后，会返回给我们一个未授权的oauth_token和oauth_token_secret，因为我们还没有获得用户的授权。

2. 有了上一步的请求返回的oauth_token和oauth_token_secret，在进行下一步请求之前我们需要根据我们应用的类型决定我们下一步的策略。如果我们是一个web应用，我们有自己的域名我们就可以选择使用callback_url的方式，但是我要做得是一个Firefox插件这种方式显然不合适，那么我只有选择使用verify PIN的方式了。确定了这个，我们请求User Authorize URL(对于新浪微博就是http://api.t.sina.com.cn/oauth/authorize)。这次的参数和上次的参数还是有一些小小的差别的：首先，我们这次需要用上次请求返回的oauth_token作为oauth_consumer_key,　使用返回的oauth_token_secret作为oauth_consumer_secret，oauth_signature_method不变，oauth_timestamp根据这次请求的时间重新生成，oauth_nonce重新生成，oauth_version不变，而oauth_signature根据这次的参数生成。在User Authorize过程中，我们要加一个参数callback_url。因为我们采用verify PIN的方式，所以这个参数我可以指定为xml。因为这一步就用户授权，那么我们自然还是要输入我们需要访问的新浪微博账号的用户名和密码，分别作为userId, passwd。新浪微博接收到我们的User Authorize请求检查合法后，会以xml格式返回给我们一个oauth_verifier，证明我们的应用获得了用户的授权。

3.  有了oauth_verifier, 加上我们第一步获得oauth_token和oauth_token_secret，其他参数还是按照前面的规则(这次不需要oauth_callback)构成我们的参数，我们来请求Access Token URL(对于新浪微博就是http://api.t.sina.com.cn/oauth/access_token)。 这一次新浪微博会返回access_token和access_token_secret, 我们授权就通过了。而这个access_token和access_token_secret当我们以后请求新浪微博API时，会作为oauth_consumer_key和oauth_consumer_secret出现。比如我们要发送微博，新浪微博发送微博的API是http://api.t.sina.com.cn/statuses/update.JSON。这时我们还是按照前面的规则组织参数(以access_token作为oauth_consumer_key, access_token_secret作为oauth_consumer_secret)，同时加上参数status，值为我们需要发送的内容就OK了。

到这一步，我们还不算完，因为我们需要在Firefox的插件中调用新浪微博的oauth。我们都知道javascript直接调用新浪微博的API是跨域请求，这是不被允许的。而我们通常解决跨域请求的方式主要就是：jsonp,　flash，iframe。这里面我们唯一可以尝试是jsonp，而jsonp是需要server端也就是新浪微博配合的，而实际上新浪微博是不支持jsonp的。那是不是我们没有办法了呢?

@mozilla.org/xmlextras/xmlhttprequest;1

查看了MDN的文档，发现Firefox自己的Xmlhttprequest可以，而且可以指定同步还是移步，然后在callback方法里解析返回参数。具体如何实现MDN。

ps：这个插件的代码是作为一个其他应用的一部分，这涉及其他人的劳动，有兴趣可以发站内信或邮件我会单独发一份(只包含Firefox插件部分)给你。

上述就是小编为大家分享的如何快速开发新浪微博的Firefox插件了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网VUE频道。