Firefox 3.0 扩展代码中使用 API技巧

关注

原创最新推荐文章于 2026-06-19 08:13:05 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

Firefox扩展开发与实战指南 Firefox扩展（Firefox Add-ons）是一种基于JavaScript、XUL、CSS等技术构建的浏览器插件，允许开发者对浏览器功能进行增强与定制。其核心机制是通过注册特定的配置文件（如和），将扩展资源集成进浏览器界面并赋予其访问底层API的能力。扩展的应用场景极为广泛，包括但不限于：个性化定制：修改浏览器界面、添加快捷功能按钮。安全增强：实现广告拦截、脚本过滤、隐私保护等功能。效率工具：如笔记记录、页面翻译、快捷搜索等辅助工具。阅读详情

即将发布的 Firefox 3.0 内置了对微格式的支持，可通过 Firefox 扩展访问这种 API。这篇技巧通过一个简单的例子说明如何在扩展代码中使用这种 API。我们从一个简单的 Hello World 扩展开始，使它能够存储来自任何网页的 hCard，然后利用存储的 hCard 填充 Web 表单。

阅读这篇技巧文章需要对 Firefox 的扩展机制有所了解。所幸的是，如果编写过 JavaScript 和 HTML，基本上就掌握了需要的知识。开发扩展的有关说明请参阅文章后面的参考资料。本文只涉及到基本的东西。还需要用到 Firefox 3.0，撰写本文的时候这个版本还没有发布。如果没有安装的话，请下载最新发布的候选版本或者日构建（night build）版本。如果希望避免影响到已有的 Firefox 配置文件，可以设置单独的配置文件用于开发。关于如何在 Mozilla Developer Center 上建立扩展开发环境的详细说明请参阅参考资料。

建立扩展框架

经常用到的缩写词

API：应用程序编程接口
HTML：超文本标记语言
UI：用户界面
XML：可扩展标记语言
XUL：XML 用户界面语言

我们将使用扩展向导构建基本的结构。可以下载我生成的文件。请下载并把文件解压到工作目录中。

接下来并不是构建扩展并安装，而是把工作目录映射到 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 元素。

回页首

添加 UI 元素

因为希望用户能够触发扩展功能，还需要提供两个工具栏按钮。添加工具栏按钮需要在 XUL 覆盖层中进行描述。打开文件 hcardformfiller/content/firefoxOverlay.xul 并用清单 2 中的代码替换。

清单 2. firefoxOverlay.xul 文件

                
<?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>

清单 2 提供了两个工具栏按钮：Grab 和 Paste。为使用方便，两者使用了相同的图标 hcardformfiller.png，可在下载文件中找到。现在保存并重新启动 Firefox，如果右键单击这两个按钮并选择 Customize，就可以将它们放到导航工具栏上。图 1 显示了最后得到的结果。

图 1. 增加的工具栏按钮

本文转自IBM Developerworks中国

请点击此处查看全文

收录于