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', 就能够了。

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

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