65.9K
CodeProject 正在变化。 阅读更多。
Home

Building FireFox 插件/扩展入门

Hirva Prithiani
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.71/5 (14投票s)

2008年12月13日

CPOL

6分钟阅读

viewsIcon

58444

Firefox 插件创建的基本知识。

引言

FireFox 插件是浏览器的一项非常受欢迎的功能，它允许用户为浏览器添加更多功能，甚至修改其行为，通常以额外的工具栏、上下文菜单、主题或用户界面（用于自定义浏览器）的形式出现。

扩展是一种可安装的文件，扩展名为 .XPI。我们许多人对许多著名的扩展都很熟悉并使用过它们。举几个例子，有 Web Developer、FoxyTunes、Firebug 和 Screengrab。

那么，让我们从扩展开发的基础开始。

开发需要了解什么？

  • XUL (XML 用户界面语言)
  • HTML
  • JavaScript
  • 基本 XML
  • CSS

XUL 入门

XUL（发音为“zool”）是一种基于 XML 的跨平台语言，用于描述 FireFox 扩展的用户界面。它被开发出来是为了使 Mozilla 浏览器开发更快、更容易。
它是一种 XML 语言，因此 XML 的所有可用功能也适用于 XUL。使用 XUL，可以快速轻松地实现和修改界面。XUL 拥有其他 XML 语言的所有优点。例如，XHTML 或其他 XML 语言（如 MathML 或 SVG）可以插入其中。此外，使用 XUL 显示的文本易于本地化，这意味着可以轻松地将其翻译成其他语言。

使用 XUL 可以开发什么？

  • 输入控件，如文本框和复选框
  • 带有按钮或其他内容的工具栏
  • 菜单栏上的菜单或弹出菜单
  • 选项卡式对话框
  • 用于分层或表格信息的树
  • 键盘快捷键

浏览器（Mozilla / FireFox）如何处理 XUL？

在 Mozilla 中，XUL 的处理方式与 HTML 或其他类型的内容的处理方式非常相似。当您在浏览器的地址栏中键入 HTML 页面的 URL 时，浏览器会找到网站并下载内容。

渲染引擎以 HTML 源的形式获取内容，并将其转换为文档树。
然后，该树被转换为一组可以在屏幕上显示的 objects。CSS、图像和其他技术用于控制表示。
XUL 的工作原理与此非常相似。相同的 CSS 属性可用于同时设置 HTML 和 XUL 的样式，并且许多功能可以在两者之间共享。您可以从本地文件系统、网页或扩展加载两者。

下面是一个简单的 XUL 文件示例，用于创建“Hello World”状态栏扩展/插件。看一下：

<? xml  version="1.0"?> 


<overlay  id="status-bar-sample-1-overlay"  
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<-- Adds a new panel onto  the statusbar -->

  <statusbar  id="status-bar">
     <statusbarpanel  id="status-bar-sample-1"

       label="Hello World"
       tooltiptext="Statusbar tip"/>
   </statusbar>
 </overlay>
  </xml>

XUL 文件可以像 HTML 文件一样使用常规的 HTTP URL（或任何类型的 URL）进行引用。但是，安装到 Mozilla 的 chrome 系统中的包可以用特殊的 chrome URL 进行引用。
chrome URL 的基本语法是

 chrome://<package name>/<part>/<file.xul>

FireFox 浏览器窗口的 URL 是 chrome://browser/content/browser.xul。尝试在 FireFox 的地址栏中键入此 URL！
文本是包名，例如 browser 或 editor。而是“content”、“skin”或“locale”，具体取决于您想要的部分。“file.xul”只是文件名。

要更深入地了解 XUL 及其元素 UI 设计，我建议您阅读一个非常棒的教程，可以在 这里 找到。您可以使用任何 HTML 编辑器编写代码，即使是记事本，这里也提供了一个简单的 XUL 在线编辑器：点击这里。

扩展/包组织

每个扩展都是许多 XUL 文件、JavaScript 文件、组件和 CSS 文件的混合体。您可以通过路径 “C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\5byzdqqy.default\extensions” 找到已安装的扩展文件。您将看到 FireFox 浏览器中所有已安装扩展的列表。打开文件。JAR 文件可以通过先将 .jar 文件扩展名更改为 .zip，然后使用常规 zip 工具进行解压缩来轻松打开。

扩展包的一般结构是

扩展名 --> chrome --> content
locale
skin
defaults -->preferences-->preference.js
chrome.manifest
install.rdf

包的文件通常组合成单个 JAR 文件或 ZIP 文件。可以使用 ZIP 工具创建和检查 JAR 文件。包通常有三个不同的部分，尽管它们都是可选的。每个部分存储在不同的目录中。这三个集合是 content、skin 和 locale，如下所述。特定包可以提供一个或多个 skin 和 locale，但用户可以用自己的替换它们。此外，包可能包含几个不同的应用程序，每个应用程序都可以通过不同的 chrome URL 访问。打包系统足够灵活，可以包含您需要的任何部分，并允许其他部分（如不同语言的文本）单独下载。

Content

它包含 XUL 和 JS 文件。许多 XUL 文件都有一个与之关联的脚本文件，有些可能不止一个。

Locale（本地化）

包含每个语言文件夹，其中包含指定包使用的文本但针对特定语言的文件。locale 结构与其他结构相似，因此我们在此跳过并继续。

默认文件

用于向用户配置文件或首选项添加内容的默认文件应放置在扩展文件夹层次结构根目录下的 defaults/ 中。默认首选项 .js 文件应存储在 defaults/preferences/ 中 - 将它们放在这里后，Firefox 的首选项系统在启动时会自动加载它们，这样您就可以使用 Preferences API 访问它们。

Manifest 文件

chrome.manifest 文件描述了一个包，并将其在磁盘上的位置映射到 chrome URL。当 Mozilla 应用程序启动时，chrome 目录中的 manifest 文件将被检查，以查看已安装了哪些包。

下面给出了 manifest 文件的一个简要示例

content  helloworld   jar:chrome/ helloworld.jar!/content/
overlay  chrome://browser/content/browser.xul  chrome://helloworld/content/overlay.xul
style  chrome://global/content/customizeToolbar.xul chrome:// helloworld/skin/style.css 
 (used when toolbars and toolbarbuttons are applied)

Install.rdf

Install Manifest 是支持 Add-on Manager 的 XUL 应用程序在安装附加组件时用来确定有关该附加组件信息的那个文件。它包含识别附加组件的元数据，提供有关谁创建了它、在哪里可以找到有关它的更多信息、它与哪些应用程序的哪些版本兼容、如何更新它等等信息。Install Manifest 的格式是 RDF/XML。

<? 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">
  <em:id>sample@indianic.net</em:id>
  <em:version>1.0</em:version>

  <em:type>2</em:type>

  <!-- Target Application this extension can install into, 
  with minimum and maximum supported versions. --> 
  <em:targetApplication>
  <Description>
  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

  <em:minVersion>2.0</em:minVersion>
  <em:maxVersion>3.0.*</em:maxVersion>
  </Description>
  </em:targetApplication>

  <!-- Front End MetaData -->
  <em:name>Sample Application</em:name>
  <em:description>Sample for the code project</em:description>
  <em:creator>Hirva</em:creator>

  <em:homepageURL>www.indianic.com </em:homepageURL>
  </Description> 
  </RDF>

关于所有标签的简要描述可以在 这里 找到。

最后

chrome 目录的内容被打包成一个 zip 文件，并更名为 packagename.jar。然后，chrome 目录安装和 manifest 文件被 zip 起来，并更名为 filename.xpi。这时您的扩展就可以安装了。通过将此 XPI 文件拖放到 FireFox 浏览器上来测试。它将被安装成其他扩展一样。

结论

这里还有一点要补充的是，XUL 也可以用于构建 FireFox 扩展以外的其他应用程序，例如

  • 独立的 XULRunner 应用程序
  • XUL 包
  • 远程 XUL 应用程序

这是对 FireFox 扩展开发的一个非常简短的介绍，以便您可以开始使用这种新颖且简单的技术。附加组件非常容易构建、修改、根据不同用户进行更新，它不需要额外的知识或资源——只需要浏览器和一个简单的编辑器！！！

在此 处 享受所有 FireFox 附加组件的列表。

历史

  • 2008 年 12 月 13 日：初始发布
  • 2011 年 6 月 16 日：从文章中移除了图片
© . All rights reserved.