這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何快速開(kāi)發(fā)新浪微博的Firefox插件，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

為平魯?shù)鹊貐^(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及平魯網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、平魯網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

Firefox的插件機(jī)制

對(duì)于一個(gè)Firefox插件來(lái)說(shuō)，我們首先需要了解的它的組織結(jié)構(gòu)。打開(kāi)一個(gè)Firefox插件工程，你一般會(huì)看這么幾個(gè)元素：chrome文件夾，defaults文件夾，chrome.manifest, install.rdf。

我們先從install.rdf說(shuō)起，相比從文件名你就明白了這個(gè)文件是要干什么的。沒(méi)錯(cuò)，這個(gè)文件就是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>

里面也就是對(duì)于你的Firefox插件的一些描述信息，其中比較關(guān)鍵的兩個(gè), 在根節(jié)點(diǎn)description下的是你的Firefox插件的id，也就是說(shuō)這個(gè)東西必須唯一(至少在你的Firefox所有插件中唯一)，另一個(gè)位于的下的則是Firefox的id，這個(gè)是不能修改的。再就是和，它們用來(lái)描述你的Firefox插件對(duì)于Firefox版本的兼容性。

接著我們來(lái)了解defaults，一句話(huà)defaults就是你的Firefox插件的preferences的default設(shè)置。

對(duì)于一個(gè)Firefox插件最核心的部分就是chrome.manifest和chrome文件夾。chrome.manifest有點(diǎn)像.NET的project文件，基本上就是對(duì)于整個(gè)Firefox插件所有元素的位置信息，而Firefox本身就是通過(guò)這個(gè)這個(gè)manifest來(lái)定位具體的元素。那么一個(gè)Firefox插件會(huì)包含那些元素呢?打開(kāi)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

這里面的結(jié)構(gòu)基本都是行結(jié)構(gòu)的，每一個(gè)行的頭就是具體的Firefox插件元素名稱(chēng)，而后面的是告訴Firefox去那個(gè)位置查找這個(gè)元素。而這其中包含了這么幾個(gè)元素：

◆ overlay: 指向你的Firefox插件的一個(gè)UI元素，包括contextmenu，toolbar，navigator bar之類(lèi)。在上面的manifest中你看我這里指向了一個(gè)后綴名是xul的文件，其實(shí)它的全稱(chēng)是Xml User Interface。顧名思義就是使用xml的格式來(lái)描述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>

上面是我用的一個(gè)overlay.xul, 我這里是給Firefox的contextmenu加了一個(gè)新的menuitem，并使用separator和原有的menuitems分隔起來(lái)。這里的文件名是可以隨意取的，那是你起的名字必須在chrome.manifest中應(yīng)用。到這里很多人好奇，那么你加的menuitem相應(yīng)的行為在那里呢?細(xì)心的你也許發(fā)現(xiàn)我這個(gè)xul中引用了一些javascript，而對(duì)于我們menuitem，F(xiàn)irefox提供了2中方法去關(guān)聯(lián)行為：第一種就是在control的oncommand中直接指定control的行為;第二中是javascript中使用document.getElementByID來(lái)獲取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);

并且，我也在這個(gè)文件中指定了css文件。其實(shí)對(duì)于xul文件中javascript和css的使用和html都基本一致。

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

◆ skin：即使皮膚，你可以在給你的插件做不同的皮膚，我的mainifest中指定了我使用classic的皮膚，所以我在skin文件夾下就應(yīng)classic的文件夾來(lái)對(duì)應(yīng)。

◆ locale：國(guó)際化，對(duì)于我們Firefox插件中需要需要國(guó)家化的UI control,　我們可以使用它的label屬性，同時(shí)在chrome.manifest中指定的culture文件夾下定義dtd文件來(lái)對(duì)應(yīng)，例如： 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屬性關(guān)聯(lián)，而overlay.xul具體和chrome.manifest指定culture文件夾下的那個(gè)dtd文件關(guān)聯(lián)，你可以看到在我的overlay.xul中有這么一句定義：

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

你的Firefox插件有了UI，也有了相應(yīng)的行為和樣式，那么你還需要什么呢?需要存儲(chǔ)，也就是你需要存儲(chǔ)一些preferences信息或者其他的比如我這里我需要存儲(chǔ)新浪微博中用戶(hù)授權(quán)通過(guò)之后獲得的Oauth_token的相關(guān)信息。Firefox對(duì)于存儲(chǔ)提供了很多方式，你可文件存貯在特殊位置，或者使用sqlite這種肖的文件數(shù)據(jù)庫(kù)。另外一種最簡(jiǎn)單的也就是我采用的就是preferences的存貯。對(duì)于Firefox插件，你可以在你的install.rdf中注明你的preference文件，這樣你可以讓用戶(hù)使用的preference文件做一些設(shè)置，并保存。而我這里我指希望使用preferences來(lái)存貯，所以我并不希望用戶(hù)看到它，那么我就不需要在install.rdf中注明。

preference文件也是一個(gè)xul文件，所以你也可以應(yīng)用javascript和css，來(lái)對(duì)于你的preference中的control進(jìn)行行為的綁定和樣式的渲染。我這里的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節(jié)點(diǎn)中的內(nèi)容便是用來(lái)做preference存貯的，你可以像我一樣通過(guò)

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

來(lái)獲得所有name前綴為Sian.Weibo的preference，然后調(diào)用它的getCharPref('oauth.access_token')來(lái)獲取值，或者通過(guò)setCharPref('oauth.access_token')設(shè)置值，對(duì)于preference，MDN上有詳細(xì)的API介紹。對(duì)于在preference中引用javascript比較tricky的一點(diǎn)就是如果在你preference中使用prePanel，那么javascript的引用代碼一定要在prePanel后面，否則你的prePanel就什么都看不到了。

最后一點(diǎn)，有些時(shí)候也許你希望你的Firefox插件在完成某些行為之后給用戶(hù)一個(gè)notification，在Firefox3中你可以使用普通的notification或者alert，而在Firefox4中你可以使用popupNotification，效果非常炫，而且還可以指定圖片和相應(yīng)的action，使得用戶(hù)在得到這個(gè)notification之后可以做進(jìn)一步的行為。示例如下：

PopupNotifications.show(gBrowser.selectedBrowser, "flashcard-add",          '"'+ selectedWord +'" 已經(jīng)成功加入你的單詞本',          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");  }

這里是我在快速開(kāi)發(fā)一個(gè)Firefox插件中獲得知識(shí)，如果你希望更詳細(xì)的知識(shí)還是需要參考MDN。寫(xiě)到這里發(fā)現(xiàn)篇幅有點(diǎn)長(zhǎng)，還是決定分為上，下兩篇。下篇來(lái)講Sina WeiBo的Oauth授權(quán)機(jī)制。

上篇主要講了講Firefox插件的機(jī)制，接著我們來(lái)看快速開(kāi)發(fā)一個(gè)Firefox插件中我面臨的第二個(gè)問(wèn)題----Oauth授權(quán)(開(kāi)始開(kāi)發(fā)的時(shí)候只是想著快速開(kāi)發(fā)完成，當(dāng)然授權(quán)這塊最快的方案自然就是basic auth，但是新浪微博6月1號(hào)以后就不支持basic auth了。)。

Oauth的官網(wǎng)上說(shuō)是這樣描述它的用途：

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

在Oauth的官網(wǎng)上對(duì)Oauth有詳盡的描述以及不用語(yǔ)言對(duì)于Oauth的實(shí)現(xiàn)，對(duì)于我的開(kāi)發(fā)我需要了解的其實(shí)非常簡(jiǎn)單.

首先對(duì)于Oauth有三個(gè)url是必須了解的：

◆ Request Token URL

◆ User Authorize URL

◆ Access Token URL

另外，我們還需要了解針對(duì)這些URL相應(yīng)的一些參數(shù)：

◆ oauth_consumer_key

◆ oauth_consumer_secret

◆ oauth_signature_method

◆ oauth_signature

◆ oauth_timestamp

◆ oauth_nonce

◆ oauth_version

具體這些URL和參數(shù)有什么作用呢?我們結(jié)合新浪微博來(lái)說(shuō)。對(duì)于開(kāi)發(fā)一個(gè)新浪微博的應(yīng)用，你必須在新浪微博申請(qǐng)一個(gè)app key和app key secret, 有了它們我們就可以開(kāi)始了。新浪的Oauth是這樣一個(gè)流程：

1. 第一次你需要做的是Request Token URL，對(duì)于新浪微博就是http://api.t.sina.com.cn/oauth/request_token。接著就是請(qǐng)求的參數(shù)了，這個(gè)時(shí)候你需要把你申請(qǐng)的app key作為oauth_consumer_key,　而把你的app key secret作為oatu_consumer_secret。oauth_signature_method就是你的加密算法，oauth支持 HMAC-SHA1， RSA-SHA1， PLAINTEXT這三種算法，而新浪微博指定需要HMAC-SHA1，所以對(duì)與oauth_signature_method我們這里就是HMAC-SHA1了。oauth_timestamp就是請(qǐng)求的時(shí)間戳，這個(gè)時(shí)間戳的范圍是現(xiàn)在1970 00:00:00 GMT的秒數(shù)，而且每次請(qǐng)求的時(shí)間戳必須大于上次的。oauth_nonce就是隨機(jī)生成的一個(gè)字符串，就是為了防止重復(fù)請(qǐng)求。oauth_version現(xiàn)在只能是1.0。最后我們需要對(duì)所有參數(shù)使用oauth_signature_method指定的加密算法加密作為oauth_signature。對(duì)于請(qǐng)求的參數(shù)，我們有兩種綁定方式：Get: 拼URL;Post:　放在Http heads里。 有了URL和參數(shù)我們就可以發(fā)起我們的請(qǐng)求。當(dāng)新浪微博接受我們的請(qǐng)求檢查合法后，會(huì)返回給我們一個(gè)未授權(quán)的oauth_token和oauth_token_secret，因?yàn)槲覀冞€沒(méi)有獲得用戶(hù)的授權(quán)。

2. 有了上一步的請(qǐng)求返回的oauth_token和oauth_token_secret，在進(jìn)行下一步請(qǐng)求之前我們需要根據(jù)我們應(yīng)用的類(lèi)型決定我們下一步的策略。如果我們是一個(gè)web應(yīng)用，我們有自己的域名我們就可以選擇使用callback_url的方式，但是我要做得是一個(gè)Firefox插件這種方式顯然不合適，那么我只有選擇使用verify PIN的方式了。確定了這個(gè)，我們請(qǐng)求User Authorize URL(對(duì)于新浪微博就是http://api.t.sina.com.cn/oauth/authorize)。這次的參數(shù)和上次的參數(shù)還是有一些小小的差別的：首先，我們這次需要用上次請(qǐng)求返回的oauth_token作為oauth_consumer_key,　使用返回的oauth_token_secret作為oauth_consumer_secret，oauth_signature_method不變，oauth_timestamp根據(jù)這次請(qǐng)求的時(shí)間重新生成，oauth_nonce重新生成，oauth_version不變，而oauth_signature根據(jù)這次的參數(shù)生成。在User Authorize過(guò)程中，我們要加一個(gè)參數(shù)callback_url。因?yàn)槲覀儾捎胿erify PIN的方式，所以這個(gè)參數(shù)我可以指定為xml。因?yàn)檫@一步就用戶(hù)授權(quán)，那么我們自然還是要輸入我們需要訪(fǎng)問(wèn)的新浪微博賬號(hào)的用戶(hù)名和密碼，分別作為userId, passwd。新浪微博接收到我們的User Authorize請(qǐng)求檢查合法后，會(huì)以xml格式返回給我們一個(gè)oauth_verifier，證明我們的應(yīng)用獲得了用戶(hù)的授權(quán)。

3.  有了oauth_verifier, 加上我們第一步獲得oauth_token和oauth_token_secret，其他參數(shù)還是按照前面的規(guī)則(這次不需要oauth_callback)構(gòu)成我們的參數(shù)，我們來(lái)請(qǐng)求Access Token URL(對(duì)于新浪微博就是http://api.t.sina.com.cn/oauth/access_token)。 這一次新浪微博會(huì)返回access_token和access_token_secret, 我們授權(quán)就通過(guò)了。而這個(gè)access_token和access_token_secret當(dāng)我們以后請(qǐng)求新浪微博API時(shí)，會(huì)作為oauth_consumer_key和oauth_consumer_secret出現(xiàn)。比如我們要發(fā)送微博，新浪微博發(fā)送微博的API是http://api.t.sina.com.cn/statuses/update.json。這時(shí)我們還是按照前面的規(guī)則組織參數(shù)(以access_token作為oauth_consumer_key, access_token_secret作為oauth_consumer_secret)，同時(shí)加上參數(shù)status，值為我們需要發(fā)送的內(nèi)容就OK了。

到這一步，我們還不算完，因?yàn)槲覀冃枰贔irefox的插件中調(diào)用新浪微博的oauth。我們都知道javascript直接調(diào)用新浪微博的API是跨域請(qǐng)求，這是不被允許的。而我們通常解決跨域請(qǐng)求的方式主要就是：Jsonp,　flash，iframe。這里面我們唯一可以嘗試是jsonp，而jsonp是需要server端也就是新浪微博配合的，而實(shí)際上新浪微博是不支持jsonp的。那是不是我們沒(méi)有辦法了呢?

@mozilla.org/xmlextras/xmlhttprequest;1

查看了MDN的文檔，發(fā)現(xiàn)Firefox自己的Xmlhttprequest可以，而且可以指定同步還是移步，然后在callback方法里解析返回參數(shù)。具體如何實(shí)現(xiàn)MDN。

ps：這個(gè)插件的代碼是作為一個(gè)其他應(yīng)用的一部分，這涉及其他人的勞動(dòng)，有興趣可以發(fā)站內(nèi)信或郵件我會(huì)單獨(dú)發(fā)一份(只包含F(xiàn)irefox插件部分)給你。

上述就是小編為大家分享的如何快速開(kāi)發(fā)新浪微博的Firefox插件了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)名稱(chēng)：如何快速開(kāi)發(fā)Firefox插件
本文網(wǎng)址：http://chinadenli.net/article36/jpcgsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、python、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)