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

file.initWithPath('C:\\temp\\temp.txt');
var charset = 'Shift_JIS';
var fileStream = Components.classes['@mozilla.org/network/file-input-stream;1']
                 .createInstance(Components.interfaces.nsIFileInputStream);
fileStream.init(file, 1, 0, false);
var converterStream = Components.classes['@mozilla.org/intl/converter-input-stream;1']
                      .createInstance(Components.interfaces.nsIConverterInputStream);
                      converterStream.init(fileStream, charset, fileStream.available(),
                      converterStream.DEFAULT_REPLACEMENT_CHARACTER);
var out = {};
converterStream.readString(fileStream.available(), out);
var fileContents = out.value;
converterStream.close();
fileStream.close();
alert(fileContents);

字符編碼問題，只要設置中文為 charset = 'GBK', 就可以了。

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

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