531      阿裏雲  技術社區[雲棲]

Firefox（火狐）瀏覽器擴展開發初探

        最近開發一個FF的擴展，自動完成公司的訂餐操作，主要完成的功能很簡單：登陸網站，執行一個特定操作，並在ff的狀態欄內顯示執行的成功或者失敗的狀態。以前沒有寫過FF擴展，需要從頭學習，在完成這個擴展過程中，有些收獲記錄下來，一方麵自己記錄，另一方麵也方便有此需求的同學。在整個開發過程中碰到一些問題，也走了一些彎路，希望對其他同學有所幫助。
        由於是第一開發FF擴展，沒什麼經驗，所以，第一步先去搜索些關於FF插件開發的文檔。先幾乎把所有關於FF插件開發的中文文檔看個邊，至少了解FF擴展和插件的基本信息，以及插件的基本結構，並在這個過程中在構建自己的開發環境。
        構建自己的開發環境，構建自己的firefox開發環境，好處是你可以隨便在這個開發環境中折騰，出現問題也不會影響你正常firefox的使用，當然使用這場模式也沒問題。這一步主要做的事情有
                第一步，firefox啟動時，添加-no-remote -P develop 參數，其中develop代表開發者，如果有多個開發者你可以改這個字段就可以。Windows係統修改方法，是右鍵Firefox圖標，屬性，在目錄裏麵添加此項即可，如下圖
       
                第二步，為了更好的調試插件，修改Firefox某些項配置，具體方法：firefox的地址欄輸入about:config回車，
                        參數：javascript.options.showInConsole= true
                        作用：將chrome文件中的錯誤顯示在Console裏。
                        參數：nglayout.debug.disable_xul_cache= true
                        作用：關閉XUL緩存，這允許不重啟而改變窗口以及對話的內容。這裏，可以使用目錄而不是Jar。但是Overlay改變後，overlay文檔必須重載（這一項非常有用，修改uxl後不用重啟窗口）。
                        參數：browser.dom.window.dump.enabled= true
                        作用：這將允許dump()函數輸出到stdout裏。參考window.dump函數。特權應用也可用nsIConsoleService。
                        參數：javascript.options.strict= true
                        作用：啟用嚴格JavaScript錯誤提示，js出錯調試可用。
                        參數：extensions.logging.enabled= true
                        作用：這將給出更多關於安裝以及更新插件的日誌信息。
                        參數：nglayout.debug.disable_xul_fastload= true (僅限Gecko 2.0+ (Firefox 4.0+))
                        參數：dom.report_all_js_exceptions= true
            以上參數有些在你的配置項已經存在，可能設置的狀態值不對，修改下即可。有些參數可能沒有，需要你手動創建這些參數和值。隻需要在list中右鍵-》新建-》布爾即可。
           了解FF擴展的基本文件結構


        了解ff擴展的基本結構，也對FF擴展相關的文檔有所了解。現在最迫切的是想先創建一個自己的擴展，雖然我們現在還是很了解install.rdf,chrome.manifest文件內是什麼東東，但是絲毫不妨礙我們創建一個FF的擴展，因為FF已經給我們提供了一個工具，可以生成自己的擴展，作為新手我強烈建議創建一個這樣的擴展包，學習FF的擴展目錄結構和文件內容。創建ff擴展的鏈接https://addons.mozilla.org/en-US/developers/tools/builder，訪問這個頁麵，按上麵說明每項參數填寫即可，和其他網站一樣，星號是必填的。填寫完成後，點擊底部按鈕，就會創建你的第一個FF擴展，然後下載下這個zip包，把zip後者，修改成xpi，然後拖到你FF中去，安裝，重啟，看看你的第一個ff擴展吧，為了看到效果，建議你把這一串屬性全都勾選上，這樣你可以方便的看到插件所能展現的效果了。

沒有寫一行代碼，第一個FF擴展已經完成了。接下來，我們仔細研究下FF擴展的文件吧
       Install.rdf文件，install.rdf文件是FF擴展的安裝文件，在這個文件配置FF擴展相關的信息。
<?xmlversion="1.0" encoding="UTF-8"?>
<RDF xmlns="https://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:em="https://www.mozilla.org/2004/em-rdf#">
  <Descriptionabout="urn:mozilla:install-manifest">
       <!—擴展的ID，之前的版本都是guid，現在流行方式是個email地址，要確保這個ID在你的電腦上唯一-->
       <em:id>ugg_xchj@hotmail.com </em:id>
       <!—2表示是ff擴展，這個數字不要變-->
       <em:type>2</em:type>
       <!—FF擴展的名字-->
       <em:name>u-mytest-name</em:name>
       <!—FF擴展的版本號-->
       <em:version>1</em:version>
       <!—FF擴展的創建者和貢獻者->
       <em:creator>ugg</em:creator>
       <em:contributor>ugg </em:contributor>
       <!—FF擴展的描述->
       <em:description>u-description</em:description>
       <!—FF擴展的關於部分，可以是一個網址，也可以是擴展內的一個窗口個窗口->
       <em:aboutURL>chrome://u-packagename/content/about.xul</em:aboutURL>
       <!—FF擴展的選項部分，可以是一個網址，也可以是擴展內的一個窗口個窗口，選項部分和擴展內defaults\preferences下的文件有關係，可以通過這塊設置一些變量的默認值->
       <em:optionsURL>chrome://u-packagename/content/options.xul</em:optionsURL>
       <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!—Firefox，這個guid不能變，表示的是FF-->
                <em:minVersion>0.3</em:minVersion> <!—最低的支持版本-->
                <em:maxVersion>8.0a1</em:maxVersion> <!—最高的支持版本-->
           </Description>
       </em:targetApplication>
  </Description>
</RDF>

除了這些參數外，install.rdf還有其他的參數，詳細的可以從https://developer.mozilla.org/en/install_manifests了解

chrome.manifest文件
      content   u-na                 chrome/content/
      overlay   chrome://browser/content/browser.xul   chrome://u-na/content/ff-overlay.xul
      定義u-na包的content路徑，使用插件中的ff-overlay.xul覆蓋瀏覽器中browser.xul。
      Chrome.manifest作用不僅僅如此，還可以定義很多內容，關於這個文件的詳細描述可以參考https://developer.mozilla.org/en/chrome_registration

Xul文件
XUL（XML用戶界麵語言）是Mozilla的基於XML的語言，可以快速構建應用程序的界麵。Mozilla的界麵元素有很多比如狀態欄，工具欄，按鈕等等，需要設置xul才能更改或者控製FF的界麵，關於xul的詳細介紹參考https://developer.mozilla.org/en/xul。我們可以參考下狀態欄的xul控製
<statusbar>
                  <statusbarpanel
                   label="登陸中...."  右下角狀態欄顯示信息
                   context="stockmenu"
                   點擊後觸發事件，這個事件有js控製
         />
</statusbar>

        以上都是最簡單的內容，如果要做出花哨需要詳細查看MDN文檔。有了這些基本知識後，我們回到我之前的需求上。我希望做一個FF擴展，在這個擴展中可以設置登錄用戶的賬號和密碼，當打開FF後，按給定的用戶名和密碼登錄公司訂餐網站，執行成功或者失敗後在狀態下給出提示。最終實現，設置域賬號密碼

打開ff後的狀態顯示
，，

代碼下載，點擊此處

實現功能很簡單，代碼也比較簡單，就不做詳細介紹了，大概說下我開發過過程碰到的一些問題。

       Q：開發過程中的插件如何在FF中調試？
       A：還記得install.rdf中的<em:id>ugg_xchj@hotmail.com</em:id>字段嘛？在你的電腦C:\Documentsand Settings\用戶名\Application Data\Mozilla\Firefox\Profiles\dqfrxoai.default\extensions的目錄內創建名字為ugg.xchj@hotmail.com的文件，文件內容為正在開發這個FF擴展的絕對路徑，比如D:\m\ffex\myffex\helloword。然後重啟FF即可工具-》附件組件管理器中看到你的插件。

       Q：為什麼我創建的擴展不能加載到FF中
       A：主要有幾方麵，1：確保install.rdf，chrome.manifest文件格式正確，最好的辦法是直接修改已有的FF擴展包的install.rdf，chrome.manifest文件，一般這兩個文件出錯，FF在加載擴展過程會中斷，不能再加載其他的組件。2：編碼問題，一旦你的文件中出現中文，一定要確保采用utf-8格式保存文件，否則會加載失敗，擴展不顯示，建議所有的文件都采用utf-8格式。

      Q：如果打包xpi文件？
       A：使用winrar或者winzip打包zip，修改成xpi格式即可。注意，要在包含有install.rdf的文件目錄打包，否則會提示xpi包已損壞，不能安裝，另外壓縮方式選擇為存儲。

      Q：js代碼在FF擴展開發有何用處？
      A：FF擴展開發過程中，使用xul開發FF的擴展的界麵，而使用js開發擴展的處理邏輯，在我提供的訂餐插件中，使用js登陸網站，執行操作。Js處理邏輯很重要，我使用已經寫好的js文件，很容易開發出google的擴展插件，IE的擴展插件。所以，瀏覽器擴展的開發，更多的是js邏輯的開發。
      學習FF擴展，最佳的方式是多看看別人寫的FF擴展，下載下別人的擴展，把xpi修改成zip，直接解壓看裏麵的結構，開發就可以，學習過程很快。另外一個好出去是FF的開發社區，多看下MDN文檔，比如下麵的就是官方創建一個FF擴展的過程。https://developer.mozilla.org/en/Building_an_Extension

參考資料：

最後更新：2017-04-02 06:51:53

  上一篇： 關於ssh開發的一點小結

  下一篇： error C2146: syntax error : missing &#39;;&#39; before identifier &#39;PVOID64&#39;