构建一个扩展

  • 版本网址缩略名: 构建一个扩展
  • 版本标题: 构建一个扩展
  • 版本 id: 246166
  • 创建于:
  • 创建者: Myzee
  • 是否是当前版本?
  • 评论 /* 从网页安装扩展 */

修订内容

引言

本文档逐步演示如何建立一个简单的扩展,在火狐的状态栏的托盘上显示 "Hello,World!"

注意 本文档针对火狐 1.5。 早期版本的火狐扩展请参考其它文档。

建立开发环境

扩展文件以 ZIP 方式打包发布,带有扩展名 <tt>xpi</tt> (发音为 “zippy”)。 XPI 文件展开后的目录结构类似于下面:

extension.xpi:
              /install.rdf                   
              /components/*  
              /components/cmdline.js                   
              /defaults/
              /defaults/preferences/*.js     
              /plugins/*                        
              /chrome.manifest                
              /chrome/icons/default/*       
              /chrome/
              /chrome/content/
     

在开发时最好采用相同目录结构,这样可以直接用于测试,比较方便。

好,我们现在开始写扩展。先建立一个目录,比如<tt>~/extensions/myExtension/</tt> 或者 <tt>C:\extensions\myExtension\</tt>。在这个目录下,建立一个子目录 <tt>chrome</tt>, 在 <tt>chrome</tt> 下,再建立一个目录 <tt>content</tt>。

(在类 unix 系统上,你可以同 <tt>mkdir -p chrome/content</tt> 同时建立 chrome 和 content 目录;在 windows 上,你可以 <tt>md chrome/content</tt> 来同时建立 chrome 和 content 目录)。

在扩展的 目录下,<tt>chrome</tt> 目录的旁边,创建立两个文本文件, <tt>chrome.manifest</tt> 和 <tt>install.rdf</tt>。

建立开发环境的技巧可以参考: Mozillazine Knowledge Base.

创建安装配置文件

把如下内容加入 install.rdf

<?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@foo.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>1.0+</em:minVersion>
        <em:maxVersion>1.5.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
   
    <!-- Front End MetaData -->
    <em:name>Sample!</em:name>
    <em:description>A test extension</em:description>
    <em:creator>Your Name Here</em:creator>
    <em:homepageURL>http://www.foo.com/</em:homepageURL>
  </Description>      
</RDF>
  • sample@foo.net - 扩展的 ID. 这个值的作用是唯一标识这个扩展,并不是你的邮件地址。也可以直接使用 GUID。
  • Specify <tt><em:type>2</em:type></tt> -- 2 表示这是一个扩展 (其它类型看这里 Install Manifests#type )。
  • {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - 火狐的唯一标识。
  • 1.0+ - 所兼容的火狐最低版本号。
  • 1.5.0.* - 所兼容的火狐最高版本号。请勿把它设置为高于火狐当前的最高版本号。

更多的属请看这里 Install Manifests

保存文件。

用 XUL 扩展浏览器

火狐的用户界面是用 XUL 和 JavaScript 写成的。XUL 通过 XML 语法描述用户界面的 widgets 组织。widgets 可以与 JavaScript 代码绑定,提供各种功能。

通过加入或修改 widget,可以修改浏览器的用户界面。

browser(浏览器的主窗口) 所对应的 XUL 文件是 <tt>browser.xul</tt>(包含在<tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt> 中). 在 browser.xul 可以找到对状态栏的描述:

<statusbar id="status-bar">
 ... <statusbarpanel>s ...
</statusbar>

<tt><statusbar id="status-bar"></tt> 是 XUL 覆盖的一个“融合点”。

XUL 覆盖

XUL Overlays 是一种动态添加 widgets 到 XUL 文档的一种方法。 一个 XUL 覆盖就是一个 .xul 文件,该文件描述了一段 XUL 代码通过哪一个“融合点” 插入到“主”文档中。插入的 XUL 代码可以描述 widgets 的插入,删除和修改。

XUL 覆盖文档的例子

<?xml version="1.0"?>
<overlay id="sample" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <statusbar id="status-bar">
  <statusbarpanel id="my-panel" label="Hello, World"/>
 </statusbar>
</overlay>

命名为status-bar 的 <tt><statusbar></tt> 元素指定了在 browser 窗口上附加元素的 “融合点”。

子元素 <tt><statusbarpanel></tt> 要添加的的 widget。

把上面的示例代码保存在一个文件 <tt>sample.xul</tt> 中,并把它复制到前面创建的 <tt>chrome/content</tt> 目录下。

Chrome 路径

创建 Chrome 清单

要了解更多关于 Chrome Manifests 的信息,请参考 Chrome Manifest

把下列代码加到 chrome.manifest 文件当中:

content     sample    chrome/content/

(不要忘了最后的"<tt>/</tt>"! 少了它, 扩展加载会失败.)

这个文件指定如下内容:

  1. chrome 包所包含的内容
  2. chrome 包的名字
  3. chrome 包对应文件的位置

在我们的 chrome 包 sample 中,content 所包含的文件位于 <tt>chrome/content</tt> 下,这个路径是相对于 <tt>chrome.manifest</tt> 而言的。

注意,content, locale 和 skin 的文件必须放在 <tt>chrome</tt> 的子目录 conetnt, local, skin 中。如没有 local,skin 文件,则可以忽略。

在安装扩展时,火狐会根据这个文件来登记 chrome 包。

登记覆盖

若想在浏览器的主窗口显示时,我们所附加的 widget 也同时显示,必须向火狐登记。在 <tt>chrome.manifest</tt> 中添加一行:

overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

这表示在 browser.xul 加载时,同时加载覆盖<tt>sample.xul</tt>.

测试

首先,我们要把扩展安装到火狐中。在火狐 1.0 以前,必须把文件打包成 XPI 文件,并用火狐打开,安装。这很麻烦,现在已经有了更便捷的方法。

  1. 打开你的 Profile Folder
  2. 打开 extensions 目录 (如果没有,就创建一个)
  3. 建立一个新的文件, 把你的扩展目录路径写到文件中,也就是<tt>~/extensions/myExtension</tt> or <tt>C:\extensions\myExtension\</tt> . 把文件命名为 扩展的 id, 也就是 <tt>sample@foo.net</tt>

现在我们可以测试扩展了!

启动火狐。火狐会发现并安装你的扩展。当浏览器的主窗口显示时,在其右下方,状态栏中,应该能看到文字 "Hello, World!"。

<center>

Image:firefox_extension_statusbar.PNG

</center>

打包

现在我们的扩展已经能工作了,在发布前,应该把它打个包。

把扩展所在目录下的文件,目录,子目录用 zip 方式打个包,并带有后缀 .xpi。若你安装有 7z,可以这样:

7z -tzip a sample.xpi *

现在可以把你的 .xpi 文件放到服务器上,确保该服务器能识别 <tt>application/x-xpinstall</tt> 类型. 你可以提供到这个文件的连接,这样用户就能通过火狐来安装它了。

比如:sample.xpi 点击安装

从网页安装扩展

你能有很多种方法从网页上安装各种扩展,其中包括通过使用InstallTrigger对象直接点击后缀为xpi的链接。鼓励扩展提供商和网络创作者使用InstallTrigger方法来安装各类xpi,给用户提供最好的经验

修订版来源

<h4 name=".E5.BC.95.E8.A8.80"> 引言 </h4>
<p>本文档逐步演示如何建立一个简单的扩展,在火狐的状态栏的托盘上显示 "Hello,World!"
</p>
<div class="note"><b>注意</b> 本文档针对火狐 1.5。 早期版本的火狐扩展请参考其它文档。</div>
<h4 name=".E5.BB.BA.E7.AB.8B.E5.BC.80.E5.8F.91.E7.8E.AF.E5.A2.83"> 建立开发环境 </h4>
<p>扩展文件以 ZIP 方式打包发布,带有扩展名 <tt>xpi</tt> (<i>发音为 “zippy”</i>)。 XPI 文件展开后的目录结构类似于下面:
</p>
<pre class="eval">extension.xpi:
              /<a href="cn/Install.rdf">install.rdf</a>                   
              <a href="#XPCOM_Components">/components/*</a>  
              <a href="#Application_Command_Line">/components/cmdline.js</a>                   
              <a href="#Defaults_Files">/defaults/</a>
              <a href="#Defaults_Files">/defaults/preferences/*.js</a>     
              /plugins/*                        
              /<a href="cn/Chrome.manifest">chrome.manifest</a>                
              /<a href="cn/Chrome_window_icons">chrome/icons/default/*</a>       
              /chrome/
              /chrome/content/
     
</pre>
<p>在开发时最好采用相同目录结构,这样可以直接用于测试,比较方便。
</p><p>好,我们现在开始写扩展。先建立一个目录,比如<tt>~/extensions/myExtension/</tt>  或者 <tt>C:\extensions\myExtension\</tt>。在这个目录下,建立一个子目录 <tt>chrome</tt>, 在 <tt>chrome</tt> 下,再建立一个目录 <tt>content</tt>。 
</p><p>(在类 unix 系统上,你可以同 <tt>mkdir -p chrome/content</tt> 同时建立 chrome 和 content 目录;在 windows 上,你可以 <tt>md chrome/content</tt> 来同时建立 chrome 和 content 目录)。
</p><p>在扩展的 <b>根</b> 目录下,<tt>chrome</tt> 目录的旁边,创建立两个文本文件, <tt>chrome.manifest</tt> 和 <tt>install.rdf</tt>。
</p><p>建立开发环境的技巧可以参考:
<a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">Mozillazine Knowledge Base</a>.
</p>
<h4 name=".E5.88.9B.E5.BB.BA.E5.AE.89.E8.A3.85.E9.85.8D.E7.BD.AE.E6.96.87.E4.BB.B6"> 创建安装配置文件 </h4>
<p>把如下内容加入 install.rdf
</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;

&lt;RDF xmlns="<span class="plain">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
     xmlns:em="<span class="plain">http://www.mozilla.org/2004/em-rdf#</span>"&gt;

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:id&gt;<b>sample@foo.net</b>&lt;/em:id&gt;
    &lt;em:version&gt;<b>1.0</b>&lt;/em:version&gt;
    &lt;em:type&gt;2&lt;/em:type&gt;
   
    &lt;!-- Target Application this extension can install into, 
         with minimum and maximum supported versions. --&gt; 
    &lt;em:targetApplication&gt;
      &lt;Description&gt;
        &lt;em:id&gt;<b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b>&lt;/em:id&gt;
        &lt;em:minVersion&gt;<b>1.0+</b>&lt;/em:minVersion&gt;
        &lt;em:maxVersion&gt;<b>1.5.0.*</b>&lt;/em:maxVersion&gt;
      &lt;/Description&gt;
    &lt;/em:targetApplication&gt;
   
    &lt;!-- Front End MetaData --&gt;
    &lt;em:name&gt;<b>Sample!</b>&lt;/em:name&gt;
    &lt;em:description&gt;<b>A test extension</b>&lt;/em:description&gt;
    &lt;em:creator&gt;<b>Your Name Here</b>&lt;/em:creator&gt;
    &lt;em:homepageURL&gt;<b><span class="plain">http://www.foo.com/</span></b>&lt;/em:homepageURL&gt;
  &lt;/Description&gt;      
&lt;/RDF&gt;
</pre>
<ul><li> <b>sample@foo.net</b> - 扩展的 ID. 这个值的作用是唯一标识这个扩展,并不是你的邮件地址。也可以直接使用 GUID。
</li><li> Specify <tt>&lt;em:type&gt;2&lt;/em:type&gt;</tt> -- 2 表示这是一个扩展 (其它类型看这里 <a href="cn/Install_Manifests#type">Install Manifests#type</a> )。
</li><li> <b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b> - 火狐的唯一标识。
</li><li> <b>1.0+</b> - 所兼容的火狐最低版本号。
</li><li> <b>1.5.0.*</b> - 所兼容的火狐最高版本号。请勿把它设置为高于火狐当前的最高版本号。
</li></ul>
<p>更多的属请看这里 <a href="cn/Install_Manifests">Install Manifests</a>。
</p><p>保存文件。
</p>
<h4 name=".E7.94.A8_XUL_.E6.89.A9.E5.B1.95.E6.B5.8F.E8.A7.88.E5.99.A8"> 用 XUL 扩展浏览器 </h4>
<p>火狐的用户界面是用 XUL 和 JavaScript 写成的。<a href="cn/XUL">XUL</a> 
通过 XML 语法描述用户界面的 widgets 组织。widgets 可以与 JavaScript 代码绑定,提供各种功能。
</p><p>通过加入或修改 widget,可以修改浏览器的用户界面。
</p><p>browser(浏览器的主窗口) 所对应的 XUL 文件是 <tt>browser.xul</tt>(包含在<tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt> 中). 在 browser.xul 可以找到对状态栏的描述:
</p>
<pre class="eval">&lt;statusbar id="status-bar"&gt;
 ... &lt;statusbarpanel&gt;s ...
&lt;/statusbar&gt;
</pre>
<p><tt>&lt;statusbar id="status-bar"&gt;</tt> 是 XUL 覆盖的一个“融合点”。
</p>
<h5 name="XUL_.E8.A6.86.E7.9B.96"> XUL 覆盖 </h5>
<p><a href="cn/XUL_Overlays">XUL Overlays</a> 
是一种动态添加 widgets 到 XUL 文档的一种方法。
一个 XUL 覆盖就是一个 .xul 文件,该文件描述了一段 XUL 代码通过哪一个“融合点” 插入到“主”文档中。插入的 XUL 代码可以描述 widgets 的插入,删除和修改。 
</p><p><b>XUL 覆盖文档的例子</b>
</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;
&lt;overlay id="sample" 
         xmlns="<span class="plain">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
 &lt;statusbar id="<b>status-bar</b>"&gt;
  &lt;statusbarpanel id="my-panel" label="Hello, World"/&gt;
 &lt;/statusbar&gt;
&lt;/overlay&gt;
</pre>
<p>命名为<b>status-bar</b> 的 <tt>&lt;statusbar&gt;</tt> 元素指定了在 browser 窗口上附加元素的 “融合点”。
</p><p>子元素 <tt>&lt;statusbarpanel&gt;</tt> 要添加的的 widget。
</p><p>把上面的示例代码保存在一个文件 <tt><b>sample.xul</b></tt> 中,并把它复制到前面创建的 <tt>chrome/content</tt> 目录下。
</p>
<h4 name="Chrome_.E8.B7.AF.E5.BE.84"> Chrome 路径 </h4>
<h4 name=".E5.88.9B.E5.BB.BA_Chrome_.E6.B8.85.E5.8D.95"> 创建 Chrome 清单 </h4>
<p>要了解更多关于 Chrome Manifests 的信息,请参考 <a href="cn/Chrome_Manifest">Chrome Manifest</a>。
</p><p>把下列代码加到 <b>chrome.manifest</b> 文件当中:
</p>
<pre class="eval">content     sample    chrome/content/
</pre>
<p>(<b>不要忘了最后的"<tt>/</tt>"!</b> 少了它, 扩展加载会失败.)
</p><p>这个文件指定如下内容:
</p>
<ol><li> chrome 包所包含的内容
</li><li> chrome 包的名字
</li><li> chrome 包对应文件的位置
</li></ol>
<p>在我们的 chrome 包 <b>sample</b> 中,<b>content</b> 所包含的文件位于  <tt>chrome/content</tt> 下,这个路径是相对于 <tt>chrome.manifest</tt> 而言的。
</p><p>注意,content, locale 和 skin 的文件必须放在 <tt>chrome</tt> 的子目录 conetnt, local, skin 中。如没有 local,skin 文件,则可以忽略。
</p><p>在安装扩展时,火狐会根据这个文件来登记 chrome 包。
</p>
<h4 name=".E7.99.BB.E8.AE.B0.E8.A6.86.E7.9B.96"> 登记覆盖 </h4>
<p>若想在浏览器的主窗口显示时,我们所附加的 widget 也同时显示,必须向火狐登记。在 <tt>chrome.manifest</tt> 中添加一行:
</p>
<pre class="eval">overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
</pre>
<p>这表示在 browser.xul 加载时,同时加载覆盖<tt>sample.xul</tt>.
</p>
<h4 name=".E6.B5.8B.E8.AF.95"> 测试 </h4>
<p>首先,我们要把扩展安装到火狐中。在火狐 1.0 以前,必须把文件打包成 XPI 文件,并用火狐打开,安装。这很麻烦,现在已经有了更便捷的方法。
</p>
<ol><li> 打开你的 <a class="external" href="http://kb.mozillazine.org/Profile_folder">Profile Folder</a>
</li><li> 打开 <b>extensions</b> 目录 (如果没有,就创建一个)
</li><li> 建立一个新的文件, 把你的扩展目录路径写到文件中,也就是<tt>~/extensions/myExtension</tt> or <tt>C:\extensions\myExtension\</tt> . 把文件命名为 <b>扩展的 id</b>, 也就是 <tt>sample@foo.net</tt>
</li></ol>
<p>现在我们可以测试扩展了!
</p><p>启动火狐。火狐会发现并安装你的扩展。当浏览器的主窗口显示时,在其右下方,状态栏中,应该能看到文字 "Hello, World!"。
</p>
<center>
<p><img alt="Image:firefox_extension_statusbar.PNG" src="File:cn/Media_Gallery/Firefox_extension_statusbar.PNG">
</p>
</center>
<h4 name=".E6.89.93.E5.8C.85"> 打包 </h4>
<p>现在我们的扩展已经能工作了,在发布前,应该把它打个包。
</p><p>把扩展所在目录下的文件,目录,子目录用 zip 方式打个包,并带有后缀 .xpi。若你安装有 7z,可以这样:
</p>
<pre class="eval">7z -tzip a sample.xpi *
</pre>
<p>现在可以把你的 .xpi 文件放到服务器上,确保该服务器能识别 <tt>application/x-xpinstall</tt> 类型. 你可以提供到这个文件的连接,这样用户就能通过火狐来安装它了。
</p><p>比如:sample.xpi <a class="external" href="http://zhaxiaolei.googlepages.com/sample.xpi">点击安装</a>
</p>
<h4 name=".E4.BB.8E.E7.BD.91.E9.A1.B5.E5.AE.89.E8.A3.85.E6.89.A9.E5.B1.95"> 从网页安装扩展 </h4>
<p>你能有很多种方法从网页上安装各种扩展,其中包括通过使用InstallTrigger对象直接点击后缀为xpi的链接。鼓励扩展提供商和网络创作者使用<a class="external" href="http://developer.mozilla.org/en/docs/Installing_Extensions_and_Themes_From_Web_Pages">InstallTrigger方法</a>来安装各类xpi,给用户提供最好的经验
</p>
恢复到这个版本