Firefox的扩展开发介绍

Firefox的扩展开发介绍

 

陈彦旭

 

2009年3月5日

1目的

开发基于Firefox的Grabpro，要求和IE上的Grabpro具有相同功能和UI。

2简介

以前在IE中开发的Grabpro是使用一个ActiveX来实现的，通过Mozilla官方网站的介绍，我们了解到在Firefox开发一个和Grabpro具有一个相同功能和UI的软件，需要做两方面的工作：第一方面是UI的开发（负责用户交互）；第二方面是底层核心功能的实现。这两方面的功能是通过Mozilla 的Extension 和Plugin实现的。

 

3概念定义

3.1什么是Extension和Plugin

Extension 就是一个zip 包，里面有规定的一些必要文件。这个可以下载几个插件看一下他们的目录结构就好了。我下载了Google Toolbar，看了一下，主要包括一个install.rdf（安装包相关信息和文件资源路径等配置）、chrome.manifest（设置各种XUL 文件路径以及其他的一些资源文件路径）、chrome 文件夹（里面放着插件的所有源文件).简单点说Extension就是具有一定目录组织结构的zip压缩包。

Plugin 是另外一码事了，在Mozilla Developer Center 的Plugin 开发介绍文中有这么一句：Plugins are different from extensions, which modify or enhance the functionality of thebrowser itself. Plugins are also different from search plugins, which plug additionalsearch engines in the search bar. （插件与扩展不同，它更改或者改善了浏览器自身的功能。插件与搜索插件又不同，搜索插件在搜索工具栏上添加了额外的搜索引擎。）

Plugin可以让你在Firefox中使用自己的View 来展示、用自己编写的二进制文件来做某些事情，不仅仅是利用Firefox自身支持的一些特性和功能。而Extension 相对来说就不需要这些东西，只利用Firefox的开发API 就好了。

要实现我们开发Firefox上Grabpro的需求，需要同时开发Extension和Pugin才能达到我们的目的。通过研究别人写的Extension,发现要实现Firefox上Grabpro那样的界面，就是开发一个Extension就可以了，而开发Extension最重要的是XUL。

 

 

 

3.2什么是XUL?

What is XUL ？ 这个页面给出了详细的介绍：

http://www.xulplanet.com/tutorials/whyxul.html。

看完后，了解了XUL 原来是一个支持多种WEB 技术的、基于XML 的界面开发语言。它既可以在远程执行，也可以安装到本地执行。在XUL 中内置了很多界面元素，如菜单、按钮、分页等等，这样就不需要自己编写很多JS 来维护和控制很多界面元素了。而且，这些界面是按照当时的OS 外观来展现的，比如同一个按钮，在MacOS上和Windows 上看起来就不一样。另外XUL 也允许自己使用JS 和CSS 来定制自己的个性化界面。总之一句话，XUL 的主要作用就是用来展现Extension 的用户交互界面的。

3.3XUL的本质是什么？

XUL是Mozilla公司开发的基于XML的DOM（文档对象模型）实现，但它不是W3C的标准。目前Mozilla具有最好的DOM支持，实现了完整的Level1、几乎所有Level2以及部分的Level3，基于Mozilla对DOM的完美支持，所以XUL可以有很好的功能体现。

具体表现如下：

1.         规划文档的接口。

2.         对鼠标和用户界面事件、范围、遍历的支持。

3.         对CSS（层叠样式表）的支持。

4.         对XML命名空间的支持。

5.         DOM视图——描述文档的各种视图（即CSS样式之前和CSS样式化之后的文档）的接口。

6.         DOM事件——描述事件的接口。

7.         DOM样式——描述处理基于CSS样式的接口。

8.         DOM遍历和范围——描述遍历和操作文档树的接口。

 

4开发一个简单的Extension

4.1开发环境构建

通过分析别人的Extension可以了解到，Extension是按照一定的组织结构,组织的ZIP包，所以在本地我们也要按照那样的目录结构来组织文件和目录。

通过这个页面https://developer.mozilla.org/en/Building_an_Extension，可以找到编写一个Extension必须要做得一些事情，写的很清楚。最后产生的目录和文件结构是这个样子：

install.rdf

chrome.manifest

chrome

|--content

|--overlay.xul （用来在Firefox界面上添加自己的界面扩展）

|--locale

|--en-US

|--sample.Dtd （语言资源文件）

|--zh-CN

|--sample.dtd

|--zh-TW

|--sample.dtd

|--skin

|--classic

|--sampleicon.png

|--smallicon.png

|--default.css （界面显示的样式表）

 

install.rdf 用来定义一些版本信息和扩展的描述（必须）。

chrome.Manifest 描述了扩展的文件索引，扩展的有那些文件构成（必须）。

Chrome 文件的实际文件的存放目录（必须）。

Content用来包含界面描述和脚本文件的目录（必须）。

Locale如果是多语言定义了一些多种资源定义的文件。

Shin定义界面资源和CSS样式描述的文件。

按照如上所示创建目录结构，一个Extension的开发环境就搭建好了，然后我们只需在对应的目录创建相应的文件即可。

 

4.2开发语言

XUL、JS和CSS。

Ø         XUL用来实现界面的定义和描述。

Ø         JS用来实现用户的交互和动态界面的显示。

Ø         CSS用来定义界面的元素布局和更好的展示。

 

4.3在工具栏添加一个按钮

Ø         首先根据4.1描述组织一个目录结构。

Ø         创建install.rdf文件，添加文件内容如下：

<?xml version="1.0" encoding="UTF-8"?>

<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>chenyanxu8821@163.com</em:id>  （扩展ID）

    <em:name>grabpro</em:name>             (扩展名字)

    <em:version>1.0</em:version>          （扩展当前版本号）

    <em:creator>Porter</em:creator>       （作者）

    <em:targetApplication>

      <Description>

        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> （GUID）

        <em:minVersion>1.5</em:minVersion>          (最小版本用于自动更新)

        <em:maxVersion>3.0.*</em:maxVersion>       （最大版本用于自动更新）

      </Description>

    </em:targetApplication>

  </Description>

</RDF>

Ø         创建overlay.Xul文件，添加文件内容如下：

<?xml version="1.0" encoding='utf-8'?>

<?xml-stylesheet href="chrome://grabpro/skin/overlay.css" type="text/css"?>

<?xml-stylesheet href="chrome://grabpro/skin/default.css" type="text/css"?>

（引入CSS文件）

<overlay id="GrabPro-Overlay"               （界面扩展的ID）

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"           orient="vertical">

 

<script type="application/x-javascript"

src="chrome://grabpro/content/grabprobar.js"/>  （引入脚本文件）

   <toolbox id="navigator-toolbox">

      <toolbar id="grabpro-Toolbar" toolbarname="GrabPro" hidden="false">

           <toolbaritem flex="0" persist="width" > （定义工具条）

            <toolbarbutton id="grabpro-Menu" type="button"

image="chrome://grabpro/skin/logo.png"> （定义按钮）

            </toolbarbutton>              

           </toolbaritem>

       </toolbar>

   </toolbox>

 </overlay>

 

Ø         在Skin目录下添加logo.Png文件。

Ø         创建chrome.Manifest文件，添加内容如下：

content grabpro content/

locale  grabpro en-US   locale/en-US/

skin    grabpro classic/1.0 skin/

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

 chrome://grabpro/content/grabpro.xul (定义自己的Firefox界面)

 

4.3.1对chrome://的一点说明

XUL files are part of "Chrome Packages" - bundles of user interface components which are loaded

via chrome:// URIs. Rather than load the browser from disk using a file:// URI (since the location

of Firefox on the system can change from platform to platform and system to system), Mozilla

developers came up with a solution for creating URIs to XUL content that the installed application

knows about.

The browser window is: chrome://browser/content/browser.xul. Try typing this URL into the

location bar in Firefox!

Chrome URIs consist of several components:

• Firstly, the URI scheme (chrome) which tells Firefox's networking library that this is a

Chrome URI. It indicates that the content of the URI should be handled as a (chrome).

Compare (chrome) to (http) which tells Firefox to treat the URI as a web page.

• Secondly, a package name (in the example above, browser) which identifies the bundle of

user interface components. This should be as unique to your application as possible to avoid

collisions between extensions.

• Thirdly, the type of data being requested. There are three types: content (XUL,

JavaScript, XBL bindings, etc. that form the structure and behavior of an application UI),

locale (DTD, .properties files etc that contain strings for the UI's localization), and skin (CSS

and images that form the theme of the UI)

• Finally, the path of a file to load.

So, chrome://foo/skin/bar.png loads the file bar.png from the foo theme's skin section.

When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these

URIs into the actual source files on disk (or in JAR packages).

 

4.3为按钮添加事件响应

XUL添加事件响应和HTML中完全一样，脚本可以嵌入在XUL文件也可以独立在JS文件中，在这我把脚本嵌入在XUL文件中，修改后的XUL文件如下：

<?xml version="1.0" encoding='utf-8'?>

<?xml-stylesheet href="chrome://grabpro/skin/overlay.css" type="text/css"?>

<?xml-stylesheet href="chrome://grabpro/skin/default.css" type="text/css"?>

 

<overlay id="GrabPro-Overlay"               （界面扩展的ID）

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"           orient="vertical">

 

<script type="application/x-javascript">  （引入脚本文件）

function Hello()

{

elert("Hello Word!");

}

</script>

   <toolbox id="navigator-toolbox">

      <toolbar id="grabpro-Toolbar" toolbarname="GrabPro" hidden="false">

           <toolbaritem flex="0" persist="width" > （定义工具条）

            <toolbarbutton id="grabpro-Menu" type="button"

image="chrome://grabpro/skin/logo.png" onclic="Hello()"> （定义按钮）

            </toolbarbutton>              

           </toolbaritem>

       </toolbar>

   </toolbox>

 </overlay>

4.4扩展的安装

将上面编写的扩展目录打成一个zip的包，把后缀改为.xpi。然后打开Firefox浏览器，把它用鼠标拖拽到Firefox中，根据提示安装就可以了，重启Firefox就会看到在Firefox的工具条上新加了一个我们创建的按钮，单击按钮弹出Helllo Word!。

4.4.1扩展的安装方法

1.         直接把扩展拖拽到打开的Firefox插件中。

2.         把扩展直接拷贝到Firefox安装目路的Extension目录中（注意：扩展的目录必须和install.rdf中描述的<em:id>名字一样,否则Extension将不被Firefox认出）。

3.         向Mozilla网站http://addons.mozilla.org/developers/提交Extension。

下面是向网站提交的英文描述：

Mozilla Add-ons is a distribution site where you can host your extension for free. Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition Mozilla Add-ons allows users to comment and provide feedback on your extension. It is highly recommended that you use Mozilla Add-ons to distribute your extensions!

5参考资料

http://www.xulplanet.com/tutorials/whyxul.html （XUL简介）

https://developer.mozilla.org/en/XUL_Reference （XUL 使用帮助）

https://developer.mozilla.org/en/XUL_controls   (控件的使用文档)

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions （Mozilla CSS扩展）

https://developer.mozilla.org/en/Building_an_Extension （扩展开发教程）