内容


使用 XUL 实现浏览器扩展,第 2 部分

组建一个跨平台的 Firefox 扩展

Comments

系列内容:

此内容是该系列 # 部分中的第 # 部分: 使用 XUL 实现浏览器扩展,第 2 部分

敬请期待该系列的后续内容。

此内容是该系列的一部分:使用 XUL 实现浏览器扩展,第 2 部分

敬请期待该系列的后续内容。

Mozilla 的 XUL 用户界面语言(XML User Interface Language,XUL)是一种可用于开发独立应用程序和浏览器扩展的通用语言。在 本系列第 1 部分中,我展示了 XUL 扩展的基本构建块,本文则介绍如何将这些构建块组装为一个跨平台的 Firefox 扩展。由于对浏览器中的 XUL 文件存在较高的安全要求,第 1 部分中的代码功能非常有限,但是扩展则没有这么多限制,因此我还将在本文中提供一些代码中缺失的功能。

基本的扩展结构

第一步是使用前一篇文章中生成的 XUL 和支持文件构建扩展。如果您已安装了其他 Firefox 加载项,您可能注意到它们随附在文件扩展名为 .xpi 的包里,它表示 XUL 的跨平台安装包(XPI)格式(读作 “zippy”)。XPI 定义了一些包,这些包均为 .zip 文件,并且都具有特定的布局和一些清单(manifest)文件。这类似于 Java 的 JAR 格式,后者也在 .zip 内容中包含了清单文件。清单 1 显示了 .zip 文件目录,用于放置我在上一篇文章中使用 XUL、JavaScript 和 CSS 生成的扩展。

清单 1. 用于 Firefox 扩展 XPI 包的 .zip 文件目录
  Archive:  /Users/uche/stats.xpi 
   Length   Method    Size  Ratio   Date   Time   CRC-32    Name 
  --------  ------  ------- -----   ----   ----   ------    ---- 
         0  Stored        0   0%  10-08-07 23:10  00000000  chrome/ 
         0  Stored        0   0%  10-08-07 23:10  00000000  chrome/content/ 
       271  Defl:N      184  32%  10-09-07 00:13  44bb6d65  chrome/content/overlay.js 
       464  Defl:N      284  39%  10-09-07 00:13  1d873c24  chrome/content/overlay.xul 
       909  Defl:N      366  60%  10-09-07 00:13  67869f05  chrome/content/stats.js 
      1581  Defl:N      544  66%  10-09-07 00:13  49def584  chrome/content/stats.xul 
         0  Stored        0   0%  10-08-07 23:10  00000000  chrome/skin/ 
       230  Defl:N      147  36%  10-09-07 00:13  a732aecb  chrome/skin/stats.css 
       181  Defl:N      105  42%  10-09-07 00:13  f7317c0a  chrome.manifest 
         0  Stored        0   0%  10-08-07 23:10  00000000  defaults/ 
         0  Stored        0   0%  10-08-07 23:10  00000000  defaults/preferences/ 
       948  Defl:N      440  54%  10-09-07 00:13  50ee7971  install.rdf 
         0  Stored        0   0%  10-08-07 23:10  00000000  locale/ 
         0  Stored        0   0%  10-08-07 23:10  00000000  locale/en-US/ 
        43  Stored       43   0%  10-09-07 00:13  d9c38400  locale/en-US/overlay.dtd 
  --------          -------  ---                            ------- 
      4627             2113  54%                            15 files

请仔细检查文件布局,因为开发扩展过程中最大的难题可能就源于这里。您可能会注意到,有几个新文件并没有出现在上一篇文章里,我将在下一小节介绍这些文件。

XUL 覆盖

在上一篇文章中,新的 XUL 窗口是完全独立的,但是现在它被绑定为一个扩展,必须以某种方式从 Firefox 中调用。这通常要对浏览器用户界面进行调整,以为用户提供调用扩展的方法。XUL 通过提供称为 覆盖(overlay)的方式可以轻松地对用户界面进行扩展。清单 2(overlay.xul)显示了一个覆盖,它添加了一个菜单项来启动 stats 查看器窗口。

清单 2 (overlay.xul). XUL 覆盖添加了一个菜单项
<?xml version="1.0"?> 
 <?xml-stylesheet href="chrome://stats/skin/overlay.css" type="text/css"?> 
 <!DOCTYPE overlay SYSTEM "chrome://stats/locale/overlay.dtd"> 
 <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         id="stats-overlay"> 
  <script src="overlay.js"/> 

  <menupopup id="menu_ToolsPopup"> 
    <menuitem id="stats" label="&statsmenuitemname;"
        oncommand="Stats.onMenuItemCommand(event);"/> 
  </menupopup> 
 </overlay>

我将在稍后一节中进一步讨论 chrome URL。请注意文档类型声明,它用于加载一个 DTD,其中包含所有应进行本地化的字符串(基本上包括呈现给用户的所有自然语言字符串)。下一节将更详细介绍这种在 Mozilla chrome 应用程序中实现本地化(l10n)的好方法。在覆盖 XUL 内部,我指定了一个新增的菜单项。outer 元素根据 ID 指定 Firefox 中的现有目标菜单项 —menu_ToolsPopup是 “Tools” 菜单。新的菜单项在默认情况下作为最后一个菜单项添加。新的菜单项 stats以 DTD 实体的形式提供,对用户看到的标签使用一个经过本地化的字符串。oncommand属性非常关键,因为它可以确定当用户选择菜单项时发生什么操作。指定的 JavaScript 函数通过独立的脚本文件 overlay.js 提供,如清单 3 所示。

清单 3 (overlay.js). 脚本为所添加的菜单项提供操作
var Stats = { 
  onLoad: function() { 
    //You can place set-up code for the extension here 
  }, 

  onMenuItemCommand: function() { 
    window.open("chrome://stats/content/stats.xul", "", "chrome, resizable=yes"); 
  } 
 }; 

 window.addEventListener("load", function(e) { Stats.onLoad(e); }, false);

脚本的主要内容是定义了一个单独的结构 Stats,使用它封装所有函数。您还需要将所有全局变量放入该结构中。这将减少扩展的内存占用,因为它在全局名称空间(outer 结构本身的名称)中只会占用一个名称,并且对于所有表现良好的扩展来说,这是一项标准行为,可以避免与其他扩展甚至是内容脚本发生对象名冲突。您已经了解了如何使用 JavaScript 代码片段 Stats.onMenuItemCommand(event);访问清单 2 中的封装对象,这段代码将访问清单 3 中的第二个结构项。为保持完整性,我包括了一个 Stats.onLoad函数,但是扩展并没有实际使用到它。您将使用它运行任何扩展初始化代码。脚本的最后一行对 Stats.onLoad 函数进行了设置,以便在 chrome 完成加载后立即运行该函数。Stats.onMenuItemCommand函数使用上一篇文章中的 XUL 示例 applet 启动窗口。它的第二个属性是我没有使用到的窗口 ID。第三个属性为标志列表 chrome,表示新窗口具有自己的 chrome,并且不应该在浏览器的 chrome 内打开(因此,新窗口不能继承 Firefox 的菜单、工具栏、状态条、选项卡等等)。resizable=yes为用户重新调整窗口大小提供控件。

chrome 资源

您现在已经了解到,围绕该扩展新增了很多文件,并且 XPI 的一个重要方面就是在包内查找文件。这时就需要使用到清单文件 chrome.manifest,如清单 4 所示。

清单 4. 针对 Stats 扩展的 chrome 清单文件
content stats chrome/content/ 
 overlay chrome://browser/content/browser.xul chrome://stats/content/overlay.xul 

 locale stats en-US locale/en-US/ 

 skin stats classic/1.0 chrome/skin/

第一行确定主要内容的位置,例如 XUL 文件和脚本。它使用 stats别名指代包的 “chrome/content/” 文件夹,因此,举例来说,如果使用的 chrome URL 为 chrome://stats/content/stats.xul,则将通过映射 stats别名对 URL 进行解析并在 “chrome/content/” 文件夹查找 “stats.xul” 文件。第二行使用 overlay.xul(清单 2)对主浏览器 chrome 建立一个覆盖。第三行确定包含自然语言字符串的 DTD 的位置,为本地化(l10n)提供支持。示例中仅包含这些字符串的英文版本,但是您可以将这些字符串翻译为法文然后放到 fr-FR文件夹中,或者翻译为德文放到 de-DE文件夹中,等等。浏览器将自动使用和用户设置的首选语言相对应的语言。最后一行为 CSS 文件建立了一个位置,这些文件将与标准浏览器 chrome 结合在一起。

安装程序设置

XPI 的另一个关键信息文件是 install.rdf,如清单 5 所示,其中包含了扩展安装说明。

清单 5 (install.rdf). Stats 扩展的安装参数
<?xml version="1.0"?> 

 <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#"> 

    <Description about="urn:mozilla:install-manifest"> 

        <!-- Required Items --> 
        <em:id>xulapp@example.com</em:id> 
        <em:name>Stats viewer</em:name> 
        <em:version>1.0</em:version> 

        <em:targetApplication> 
            <Description> 
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> 
                <em:minVersion>1.5</em:minVersion> 
                <em:maxVersion>2.0.0.*</em:maxVersion> 
            </Description> 
        </em:targetApplication> 

        <!-- Optional Items --> 
        <em:creator>Uche Ogbuji</em:creator> 
        <em:description> 
            Opens a window in which you can view simple stats about Web pages 
        </em:description> 
        <em:homepageURL>http://www.ibm.com/developerworks/web/</em:homepageURL> 

    </Description> 
 </RDF>

大部分内容的含义不言自明,因此就不多做说明,但是需要提到的一点是,我使用 em:targetApplication元素指定所有的 Firefox 版本大于 1.5 而小于 2.0.1。较长的 em:id字符串是 Firefox 自身的应用程序全球惟一标识符(UUID)。

您应该能够将上一篇文章中的示例文件放入清单 1 中指出的位置,惟一所做的修改是将 “stats.xul” 中的 CSS 链接(用于假定 “stats.css” 位于同一个目录中)改为使用 chrome 链接 chrome://stats/skin/stats.css

完善扩展的功能

由于安全限制,我不得不去掉了 stats.js XUL 文件中的一些功能。现在我已经将它打包为一个扩展,可以补充一些缺失的内容。清单 6 展示了更新后的 stats.js,它实际执行了扩展所期望的计数操作。

清单 6. Stats 查看器窗口的完整 JavaScript 代码
//Invoked in response to a click on the "Go!" button 
 function change_url(event) 
 { 
    //Variables for convenient access to specific elements in the XUL 
    var urlbox = document.getElementById("url"); 
    var contentview = document.getElementById("contentview"); 
    var wordcountbox = document.getElementById("wordcount"); 
    var charcountbox = document.getElementById("charcount"); 
    var elemcountbox = document.getElementById("elemcount"); 

    alert(urlbox.value); 
    contentview.contentDocument.location.href = urlbox.value; 

    //Use Firefox XPath to get the raw text of the document 
    var doctext = contentview.contentDocument.evaluate( 
        "string(.)", document, null, XPathResult.STRING_TYPE, null).stringValue; 

    var wordcount = doctext.split(" ").length() 
    alert(wordcount); 
    wordcountbox.value = String(wordcount); 
    charcountbox.value = String(doctext.length()); 

    //Use Firefox XPath to count elements in the document 
    var elemcount = contentview.contentDocument.evaluate( 
        "count(//*)", document, null, XPathResult.NUMBER_TYPE, null).numberValue; 

    elemcountbox.value = String(elemcount); 
 }

这一次,我对用户加载到 contentview的 Web 页面使用了两个 XPath 表达式。通过第一个表达式 string(.),我获得了字符计数(计算字符串长度)和单词数(使用空格将字符串断开并计算结果)。通过第二个表达式 //*,我获得了元素的总数。随后我将使用这些值更新相应的文本框。

结束语

创建 Firefox 扩展是项复杂的工作,但幸运的是,社区提供了大量扩展,可从多方面提供支持。侧栏列出了其中的一些。在本系列的两篇文章中,您已了解到只要稍加处理,您也可以开发 Firefox 扩展 ,并且您还可以使用这些知识轻松地开发完整应用程序的主要部分。XUL、JavaScript 和 Mozilla 平台强强结合的威力让人印象深刻。除标准的 Web 浏览器以外,您还可以将更多的平台作为目标。通常,对诸如 Songbird 音乐管理应用程序和 Flock 社会 Web 浏览器这样的 Mazilla 应用程序(通常都基于 XUL )采用 Firefox 扩展并不困难。


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=268126
ArticleTitle=使用 XUL 实现浏览器扩展,第 2 部分: 组建一个跨平台的 Firefox 扩展
publish-date=11132007