即将发布的 Firefox 3.0 内置了对微格式的支持,可通过 Firefox 扩展访问这种 API。这篇技巧通过一个简单的例子说明如何在扩展代码中使用这种 API。我们从一个简单的 Hello World 扩展开始,使它能够存储来自任何网页的 hCard,然后利用存储的 hCard 填充 Web 表单。
阅读这篇技巧文章需要对 Firefox 的扩展机制有所了解。所幸的是,如果编写过 JavaScript 和 HTML,基本上就掌握了需要的知识。开发扩展的有关说明请参阅文章后面的 参考资料。本文只涉及到基本的东西。还需要用到 Firefox 3.0,撰写本文的时候这个版本还没有发布。如果没有安装的话,请下载最新发布的候选版本或者日构建(night build)版本。如果希望避免影响到已有的 Firefox 配置文件,可以设置单独的配置文件用于开发。关于如何在 Mozilla Developer Center 上建立扩展开发环境的详细说明请参阅 参考资料。
建立扩展框架
清单 2 提供了两个工具栏按钮:Grab 和 Paste。为使用方便,两者使用了相同的图标 hcardformfiller.png,可在 下载 文件中找到。现在保存并重新启动 Firefox,如果右键单击这两个按钮并选择 Customize,就可以将它们放到导航工具栏上。图 1 显示了最后得到的结果。
图 1. 增加的工具栏按钮
清单 3 中的第一行加载微格式 API,这是其他后续工作的基础。然后定义了
阅读这篇技巧文章需要对 Firefox 的扩展机制有所了解。所幸的是,如果编写过 JavaScript 和 HTML,基本上就掌握了需要的知识。开发扩展的有关说明请参阅文章后面的 参考资料。本文只涉及到基本的东西。还需要用到 Firefox 3.0,撰写本文的时候这个版本还没有发布。如果没有安装的话,请下载最新发布的候选版本或者日构建(night build)版本。如果希望避免影响到已有的 Firefox 配置文件,可以设置单独的配置文件用于开发。关于如何在 Mozilla Developer Center 上建立扩展开发环境的详细说明请参阅 参考资料。
建立扩展框架
我们将使用扩展向导构建基本的结构。可以
下载 我生成的文件。请下载并把文件解压到工作目录中。
接下来并不是构建扩展并安装,而是把工作目录映射到 Firefox 扩展文件夹。创建文本文件 hcardformfiller@rob.crowther 并将其放到工作目录的扩展文件路径(如清单 1 所示)。然后将该文件保存到开发配置指定的扩展目录下,本例中为 /home/robert/.mozilla/firefox/r6z6s4yl.default30/extensions(详见 Mozillazine 知识库)。
清单 1. hcardformfiller@rob.crowther 文件
/home/robert/code/xpcom/hcardformfiller
完成后使用 清单 1 中的脚本重新启动 Firefox 开发版。扩展应该已经安装,并且能够访问默认的 Hello World 元素。
清单 1. hcardformfiller@rob.crowther 文件
/home/robert/code/xpcom/hcardformfiller
完成后使用 清单 1 中的脚本重新启动 Firefox 开发版。扩展应该已经安装,并且能够访问默认的 Hello World 元素。
因为希望用户能够触发扩展功能,还需要提供两个工具栏按钮。添加工具栏按钮需要在 XUL 覆盖层中进行描述。打开文件
hcardformfiller/content/firefoxOverlay.xul 并用清单 2 中的代码替换。
清单 2. firefoxOverlay.xul 文件
hcardformfiller/content/firefoxOverlay.xul 并用清单 2 中的代码替换。
<?
xml-stylesheet href="chrome://hcardformfiller/skin/overlay.css"
type="text/css" ?>
<! DOCTYPE overlay SYSTEM "chrome://hcardformfiller/locale/hcardformfiller.dtd" >
< overlay id ="hcardformfiller-overlay"
xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
< script src ="overlay.js" />
< stringbundleset id ="stringbundleset" >
< stringbundle id ="hcardformfiller-strings"
src ="chrome://hcardformfiller/locale/hcardformfiller.properties" />
</ stringbundleset >
< toolbarpalette id ="BrowserToolbarPalette" >
< toolbarbutton id ="hcardformfiller-toolbar-button-grab"
image ="chrome://hcardformfiller/content/hcardformfiller16.png"
label ="&hcardformfillerToolbar.grabLabel;"
tooltiptext ="&hcardformfillerToolbar.grabTooltip;"
oncommand ="hcardformfiller.onToolbarButtonGrabCommand()"
class ="toolbarbutton-1 chromeclass-toolbar-additional" />
< toolbarbutton id ="hcardformfiller-toolbar-button-paste"
image ="chrome://hcardformfiller/content/hcardformfiller16.png"
label ="&hcardformfillerToolbar.pasteLabel;"
tooltiptext ="&hcardformfillerToolbar.pasteTooltip;"
oncommand ="hcardformfiller.onToolbarButtonPasteCommand()"
class ="toolbarbutton-1 chromeclass-toolbar-additional" />
</ toolbarpalette >
</ overlay >
type="text/css" ?>
<! DOCTYPE overlay SYSTEM "chrome://hcardformfiller/locale/hcardformfiller.dtd" >
< overlay id ="hcardformfiller-overlay"
xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
< script src ="overlay.js" />
< stringbundleset id ="stringbundleset" >
< stringbundle id ="hcardformfiller-strings"
src ="chrome://hcardformfiller/locale/hcardformfiller.properties" />
</ stringbundleset >
< toolbarpalette id ="BrowserToolbarPalette" >
< toolbarbutton id ="hcardformfiller-toolbar-button-grab"
image ="chrome://hcardformfiller/content/hcardformfiller16.png"
label ="&hcardformfillerToolbar.grabLabel;"
tooltiptext ="&hcardformfillerToolbar.grabTooltip;"
oncommand ="hcardformfiller.onToolbarButtonGrabCommand()"
class ="toolbarbutton-1 chromeclass-toolbar-additional" />
< toolbarbutton id ="hcardformfiller-toolbar-button-paste"
image ="chrome://hcardformfiller/content/hcardformfiller16.png"
label ="&hcardformfillerToolbar.pasteLabel;"
tooltiptext ="&hcardformfillerToolbar.pasteTooltip;"
oncommand ="hcardformfiller.onToolbarButtonPasteCommand()"
class ="toolbarbutton-1 chromeclass-toolbar-additional" />
</ toolbarpalette >
</ overlay >
清单 2 提供了两个工具栏按钮:Grab 和 Paste。为使用方便,两者使用了相同的图标 hcardformfiller.png,可在 下载 文件中找到。现在保存并重新启动 Firefox,如果右键单击这两个按钮并选择 Customize,就可以将它们放到导航工具栏上。图 1 显示了最后得到的结果。
图 1. 增加的工具栏按钮
![](https://i-blog.csdnimg.cn/blog_migrate/ca2a27ccd2cd5173f1536c010f5fea56.png)
有了工具栏按钮之后还需要赋予它们一定的功能。就是说必须编写 JavaScript 函数以支持
清单 2 中定义的工具栏按钮。首先,当用户单击 Grab 工具栏按钮的时候,需要搜索当前页面中的微格式并存储找到的第一个微格式。打开 hcardformfiller/content/overlay.js 并用清单 3 中的代码替换。
Components.utils.import(
"
resource://gre/modules/Microformats.js
"
);
var hcardformfiller = {
onLoad: function () {
this .initialized = true ;
this .strings = document.getElementById( " hcardformfiller-strings " );
this .uF = {};
},
onToolbarButtonGrabCommand: function (e) {
var uFcount =
Microformats.count( ' hCard ' , content.document, {recurseExternalFrames: true });
if (uFcount > 0 ) {
var uFlist =
Microformats.get( ' hCard ' , content.document, {recurseExternalFrames: true });
this .uF = uFlist[ 0 ];
}
}
};
window.addEventListener( " load " , function (e) { hcardformfiller.onLoad(e); }, false );
var hcardformfiller = {
onLoad: function () {
this .initialized = true ;
this .strings = document.getElementById( " hcardformfiller-strings " );
this .uF = {};
},
onToolbarButtonGrabCommand: function (e) {
var uFcount =
Microformats.count( ' hCard ' , content.document, {recurseExternalFrames: true });
if (uFcount > 0 ) {
var uFlist =
Microformats.get( ' hCard ' , content.document, {recurseExternalFrames: true });
this .uF = uFlist[ 0 ];
}
}
};
window.addEventListener( " load " , function (e) { hcardformfiller.onLoad(e); }, false );
清单 3 中的第一行加载微格式 API,这是其他后续工作的基础。然后定义了
onToolbarButtonGrabCommand
,即用户单击 Grab 工具栏按钮时执行的代码。接下来调用
Microformats.count()
看看页面中是否有 hCards。该方法的参数包括微格式名称、搜索的文档引用和可选的参数数组。这里搜索当前窗口中的 hCards,并允许解析器递归搜索遇到的每个帧。在确定了至少存在一个 hCard 之后,使用
Microformats.get()
方法得到页面中所有 hCard 的列表。参数和前面的调用一样,不过这一次返回类型为 hCard 的对象数组。为了保持示例的简单性,我们只抓取第一个并保存在全局变量中。
现在抓取了需要的 hCard。清单 4 创建了一个简单的表单让扩展来填充 hCard 信息。只需要将其放入标准 HTML 网页并保存到本地 — 对于本文来说不需要处理提交表单。
<
h1
>
hCardFormFiller Target Form
</
h1
>
< form action ="#" method ="post" >
< label > Name: < input type ="text" id ="name" /></ label >< br />
< label > Email: < input type ="text" id ="email" /></ label >< br />
< label > Home page: < input type ="text" id ="homepage" /></ label >< br />
< label > Street Address: < input type ="text" id ="address1" /></ label >< br />
< label > City: < input type ="text" id ="address2" /></ label >< br />
< label > Region: < input type ="text" id ="city" /></ label >< br />
< label > Postcode: < input type ="text" id ="postcode" /></ label >< br />
< input type ="submit" />
</ form >
< form action ="#" method ="post" >
< label > Name: < input type ="text" id ="name" /></ label >< br />
< label > Email: < input type ="text" id ="email" /></ label >< br />
< label > Home page: < input type ="text" id ="homepage" /></ label >< br />
< label > Street Address: < input type ="text" id ="address1" /></ label >< br />
< label > City: < input type ="text" id ="address2" /></ label >< br />
< label > Region: < input type ="text" id ="city" /></ label >< br />
< label > Postcode: < input type ="text" id ="postcode" /></ label >< br />
< input type ="submit" />
</ form >
现在需要定义和
清单 2 中 Paste 按钮联系在一起的函数,当用户单击该按钮时填充表单。清单 5 显示了填充表单的扩展代码。
onToolbarButtonPasteCommand:
function
(e) {
if ( this .uF.fn) {
content.document.getElementById( ' name ' ).value = this .uF.fn;
content.document.getElementById( ' email ' ).value = this .uF.email[ 0 ].value;
content.document.getElementById( ' homepage ' ).value = this .uF.url[ 0 ];
content.document.getElementById( ' address1 ' ).value = this .uF.adr[ 0 ][ ' street-address ' ];
content.document.getElementById( ' address2 ' ).value = this .uF.adr[ 0 ].locality;
content.document.getElementById( ' city ' ).value = this .uF.adr[ 0 ].region;
content.document.getElementById( ' postcode ' ).value = this .uF.adr[ 0 ][ ' postal-code ' ];
}
}
if ( this .uF.fn) {
content.document.getElementById( ' name ' ).value = this .uF.fn;
content.document.getElementById( ' email ' ).value = this .uF.email[ 0 ].value;
content.document.getElementById( ' homepage ' ).value = this .uF.url[ 0 ];
content.document.getElementById( ' address1 ' ).value = this .uF.adr[ 0 ][ ' street-address ' ];
content.document.getElementById( ' address2 ' ).value = this .uF.adr[ 0 ].locality;
content.document.getElementById( ' city ' ).value = this .uF.adr[ 0 ].region;
content.document.getElementById( ' postcode ' ).value = this .uF.adr[ 0 ][ ' postal-code ' ];
}
}
第一步先看看是否存在可供粘贴的 hCard — fn 是 hCard 微格式中必需的两个字段之一。只要有 fn 就必然有 hCard。然后将 fn 放到表单的第一个字段中。hCard 可能包含多个 e-mail 值,因此 hCard 的 email 属性是一个数组 — 只抓取了第一个 — 每个电子邮件地址有两个属性:
type
可以是
internet
、
x400
或者表示首选项的
pref
,而
value
存储真正的电子邮件地址。hCard 的
url
属性也是一个数组,不过没有子属性,其中的
adr
属性是一个原子 adr 微格式数组,可以直接在 hCard 之外操作。这些
adr
属性需要注意的是,我使用了 JavaScript 的替代引用语法,否则的话连字符就会被视作减号。结果如图 2 所示。
在本篇技巧中,在 Firefox 3.0 新增 API 的帮助下,我们获得了一个标准的 Firefox 扩展模板,并快速实现了使用 hCard 微格式的能力。由此可见,这种新的 API 大大简化了微格式的操作。只需要很少代码就可建立新的扩展,从而大大节约了时间,为您自己的扩展增加类似的功能也非常简单。
接下来,可以考虑一般化 paste 操作,从而为所有表单提供映射文件,以便使用 hCard 微格式填充表单。共享映射库可以大大简化 Web 表单的填写。
原文地址:http://www.ibm.com/developerworks/cn/xml/x-tipffoxmicroapi/?S_TACT=105AGX52&S_CMP=tec-csdn
原文地址:http://www.ibm.com/developerworks/cn/xml/x-tipffoxmicroapi/?S_TACT=105AGX52&S_CMP=tec-csdn