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', 就可以了。

 目前已经实现核心功能: 从本地文本文件抽取内容并写入网页表单，没有遇到大的难题，主要是语法不熟悉，写起来很慢。

接下来要好好设计一下界面了。 :)