Firefox 擴展開發手記

2015.7.14

因工做，想寫一個能實現將 Excel 中的信息自動提交到網頁表單的工具，決定開發一個插件試驗一下。第一次開發 FF 插件，也決定寫一下開發日誌，一方面和你們分享經驗，另外一方面也是但願能堅持到底

今天主要作了信息收集。

瞭解到基本上只須要 XML 和 Javascrtip 就能夠了

FF 官方開發中心

https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Guide/Building_components_in_JavaScript

https://developer.mozilla.org/en-US/docs/Gecko_SDK

http://kb.mozillazine.org/Getting_started_with_extension_development

https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide

實戰 Firefox 擴展開發

http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/

一個外文博客

http://robertnyman.com/2009/01/24/how-to-develop-a-firefox-extension/

比較好的兩篇中文博客

http://blog.csdn.net/zhaozheng7758/article/details/6307839

最有價值的一篇，做者開發了一樣的FillForm, 可是和個人需求不太同樣，可是頗有參考價值

http://blog.csdn.net/sysdzw/article/details/5514062

 

搭建開發環境

推薦工具

Extension Developer's Extension -  make life easier for Firefox extension developers. Testing JavaScript code, prototyping XUL layouts, and building XPI packages are all made easier by this extension. Install it and try it out!

官方 development addon 下載地址

https://developer.mozilla.org/en-US/Add-ons/Setting_up_extension_development_environment

Extension Developer's Extension  - https://addons.mozilla.org/en-US/firefox/addon/7434/

 

Tips:

1. 同時運行多個 FF 實例 - 命令行運行以下命令，可打開建立配置文件嚮導，新建一個 Dev Profile
Start -> Run C:\Program Files (x86)\Mozilla Firefox\firefox.exe -no-remote -p dev

2. 地址欄輸入  about:config，能夠打開開發人員配置頁

3. 創建測試 pointer 文件，放在 C:\Users\tzheng2x\AppData\Roaming\Mozilla\Firefox\Profiles\jxafzakn.Dev\extensions

創建文件夾結構

• install.rdf
• chrome.manifest
• chrome\
  • content\
    • sample.xul

       

 測試示例文件  Install Hello World

很簡單，就是一個 XPI 格式文件 ( 實際上就是一個 ZIP 文件， (pronounced "zippy") stands for Cross-Platform Installer, 全部支持 FF 的平臺均可以使用 XPI )，直接拖到 FF 內容區就能夠安裝測試了 。

 

文件結構分析

install.rdf 文件

rdf - resource description framework

 

今天到這裏吧，頭暈了

 

2015.7.15

今天終於完成了調試環境的搭建，這樣就debug省事多了，不用每次改一點兒再zip再從新部署.

步驟:

爲了避免影響平時的使用，建議創建一個新的 FF dev 的 profile. 

在這個 dev profile 下的 extenstion 目錄下創建 pointer 文件，指向你的源程序目錄

下載 Extension Developer's Extension  - https://addons.mozilla.org/en-US/firefox/addon/7434/

安裝後只要運行 reload all chrome 就能夠了。

 

XUL 的元素參考列表

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL

今天實現了一部分把文本信息寫到網頁表單中去的功能，基本沒有遇到太多問題，接下來要考慮如何從 Excel 中抽取信息，看起來蠻好玩。

--------------------------------------------------------------------------------------------

什麼是 XPCOM？

XPCOM 是一種跨平臺的組件對象模型，相似於微軟的 COM。它有多種的語言綁定，能夠在 JavaScript，Java，Python 和 C++ 中使用和實現 XPCOM 的組件。XPCOM 自己提供了一系列核心組件和類，好比文件和內存管理，線程，基本的數據結構（字符串，數組）等。

Reference:

XPCOM 基礎

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL

XPCOM guide

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Guide

XPCOM Interface

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/XPCOM_Interfaces

 https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL

彷佛要用到下面的類, 看來要花點時間研究一下了

Components.classes["@mozilla.org/filepicker;1"]

Components.classes["@mozilla.org/network/file-output-stream;1"]

 

2015.7.16

--------------------------------------------------------------------------------------------------------------------------------------------

Creating XPCOM Objects

There are three steps to calling an XPCOM component.

1. Get a component (Mozilla 在本身的註冊表裏存儲 Component list)
2. Get the part of the component that implements the interface that we want to use.
3. Call the function we need

 例如，咱們想實現 File Rename 功能，則須要使用 nslLocalFile 接口:

1. Get file component

2. Get nslLocalFile 接口

3. 調用接口提供的功能

 

Component 經過 contract ID 引用，語法爲

@<internetdomain>/module[/submodule[...]];<version>[?<name>=<value>[&<name>=<value>[...]]]

 

用 Javascript 語法 Get a component，若要獲得不一樣的 component, 替換方括號中的 Contract ID 便可

var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();

此時，只是創建了一個通用的 file component 的實例，而咱們只須要其中的一個接口,nslLocalFile, 因此須要添加第二行代碼

var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
if (aFile) aFile.QueryInterface(Components.interfaces.nsILocalFile);

能夠縮寫爲

var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);

QueryInterface() - is a function provided by all components which can be used to get a specific interface of that component. This function takes one parameter, the interface that you want to get.

只要替換上面的藍色部分，contract ID 和 接口名，就能夠調用任何 component 的任何接口。

XPCOM 的接口支持繼承, 全部的XPCOM 的接口都是從一個最頂層的接口nsISupports繼承而來，而這個接口對於 JS 只有一個功能， QueryInterface(), 因此這個功能能夠在全部的 component 中實現。

當不肯定一個組件是否支持某個 interface 的時候，能夠用 instanceof 操做符來檢查

 

var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
if (aFile instanceof Components.interfaces.nsILocalFile){
  // do something
}

 

nslLocalFile 的屬性和方法

initWithPath 
This method is used to initialize the path and filename for the nsILocalFile. The first parameter should be the file path, such as '/usr/local/mozilla'.
leafName 
The filename without the directory part.
fileSize 
The size of the file.
isDirectory() 
Returns true if the nsILocalFile represents a directory.
remove(recursive) 
Deletes a file. If the recursive parameter is true, a directory and all of its files and subdirectories will also be deleted.
copyTo(directory,newname) 
Copies a file to another directory, optionally renaming the file. The directory should be a nsILocalFile holding the directory to copy the file to.
moveTo(directory,newname) 
Moves a file to another directory, or renames a file. The directory should be a nsILocalFile holding the directory to move the file to.

Create(file.NORMAL_FILE_TYPE, 0666)

 

今天上午實現對本地文件的操做

<script type="text/javascript">
<![CDATA[
// put some js code here
var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
aFile.initWithPath('c:\\test\\test1.txt');
window.alert(aFile.fileSize);
aFile.copyTo('c:\\test2', "text2.txt");
]]>
</script>

Note: Use the path format suited to your platform: the Windows 「\」 path delimiter is interpreted as an escape code, so should always be written 「\\」; characters like 「./」 on Linux require no special handling.

Text file I/O

Reading a Shift-JIS text file

 1 file.initWithPath('C:\\temp\\temp.txt');
 2 var charset = 'Shift_JIS';
 3 var fileStream = Components.classes['@mozilla.org/network/file-input-stream;1']
 4                  .createInstance(Components.interfaces.nsIFileInputStream);
 5 fileStream.init(file, 1, 0, false);
 6 var converterStream = Components.classes['@mozilla.org/intl/converter-input-stream;1']
 7                       .createInstance(Components.interfaces.nsIConverterInputStream);
 8                       converterStream.init(fileStream, charset, fileStream.available(),
 9                       converterStream.DEFAULT_REPLACEMENT_CHARACTER);
10 var out = {};
11 converterStream.readString(fileStream.available(), out);
12 var fileContents = out.value;
13 converterStream.close();
14 fileStream.close();
15 alert(fileContents);

字符編碼問題，只要設置中文爲 charset = 'GBK', 就能夠了。

 目前已經實現核心功能: 從本地文本文件抽取內容並寫入網頁表單，沒有遇到大的難題，主要是語法不熟悉，寫起來很慢。

接下來要好好設計一下界面了。 :)