如何快速開發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插件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。