Compile Firefox extension

Source: Internet
Author: User
Tags guid generator

Compile Firefox extension

Firefox and Thunderbird have a good extended architecture. You can combine XML and ecmascript without writing CProgramTo write extensions

In this blog, I will see how to create a simple extension that adds a "hello World" menu item to the Firefox Tools menu.

Creating contents. RDF

Contents. RDF is a resource description framework Resource Description Framework (RDF) file that describes the extended content, it provides a data model that can be easily processed by applications. If you write simple extensions, you don't need to know much about e \ RDF, but if you are interested, you need to get more information from W3C.

First, create a directory named content that contains the expanded main content ). Contents. RDF should be placed under this directory. You need to create a directory structure as follows:

C: \ myextensions \

+-Helloworld

+-Content

+-Contents. RDF

Below is the contents. RDF.Code

<? XML version = "1.0"?>

<RDF: RDF xmlns: RDF = "http://www.w3.org/1999/02/22-rdf-syntax-ns"

Xmlns: chrome = "http://www.mozilla.org/rdf/chrome#">

<RDF: seq about = "urn: Mozilla: Package: Root">

<RDF: Li resource = "urn: Mozilla: Package: helloworld"/>

</RDF: seq>

<RDF: Description about = "urn: Mozilla: Package: helloworld"

Chrome: displayname = "Hello World"

Chrome: Author = "Brian duff"

Chrome: authorurl = "http://modev.dubh.org/helloworld"

Chrome: Name = "helloworld"

Chrome: Extension = "true"

Chrome: Description = "a simple demonstration Firefox extension.">

</RDF: Description>

<RDF: seq about = "urn: Mozilla: overlays">

<RDF: Li resource = "Chrome: // Browser/content/browser. XUL"/>

</RDF: seq>

<RDF: seq about = "Chrome: // Browser/content/browser. XUL">

<RDF: LI> chrome: // helloworld/content/helloworld-Overlay.xul </RDF: LI>

</RDF: seq>

</RDF: RDF>

The important part of this file (which also needs to be changed for each extension) is displayed in bold. We provide a package for the extension ). This package distinguishes this extension from other extensions. Here we select the helloworld package:

<RDF: seq about = "urn: Mozilla: Package: Root">

<RDF: Li resource = "urn: Mozilla: Package: helloworld"/>

</RDF: seq>

Next, we provide a description for this extension:

<RDF: Description about = "urn: Mozilla: Package: helloworld"

Chrome: displayname = "Hello World"

Chrome: Author = "Brian duff"

Chrome: authorurl = "http://modev.dubh.org/helloworld"

Chrome: Name = "helloworld"

Chrome: Extension = "true"

Chrome: Description = "a simple demonstration Firefox extension.">

</RDF: Description>

Next, we will tell Mozilla that we need to expand the product. All the user interface elements of Firefox and Thunderbird are described through an interface definition language called XUL. This interface element is called "Chrome ". You can expand the majority of the two products. Here, we want to expand the main interface of the Firefox browser. Defined:

Chrome: // Browser/content/browser. XUL

<RDF: seq about = "urn: Mozilla: overlays">

<RDF: Li resource = "Chrome: // Browser/content/browser. XUL"/>

</RDF: seq>

Now we have described what we want to expand. We need to provide an XUL file to install our Custom User Interface in the browser window. We will define these in the next helloworld-Overlay.xul file. We must tell the Mozilla file where and what it extends:

<RDF: seq about = "Chrome: // Browser/content/browser. XUL">

<RDF: LI> chrome: // helloworld/content/helloworld-Overlay.xul </RDF: LI>

</RDF: seq>

We have completed the first step of creating the extension. The following task is to define the user interface elements to be installed in the main window.

Overlaying user interface elements

XUL is the XML user interface language. XUL provides a structure called dynamic overlays, which allows you to modify the user interface elements of a window or control without modifying the original XUL file. This way, the definition of extension user interface is de-coupled from the XUL files used to define the main interface elements in Firefox and Thunderbird.

We started to create the helloworld-Overlay.xul. This file should be in the same directory as contents. RDF.

<? XML version = "1.0"?>

<Overlay id = "helloworldoverlay"

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

<Menupopup id = "menu_toolspopup">

<Menuitem label = "Hello World" position = "1"/>

</Menupopup>

</Overlay>

This simple example creates a "hello World" menu item at the top of the Tools menu. Our menu items are defined in the menupopup element. In XUL, menupopup indicates the container of a menu item, for example, a pop-up menu or a drop-down menu item of the main menu. In menupopup, we place a menu item with the ID menu_toolspopup. This menu_toolspopup is defined in browser. XUL and corresponds to the drop-down part of the Tools menu.

Creating an install manifest

The latest versions of Firefox and Thunderbird include a new extension management tool that allows you to easily install and manage extensions. To tell the extended management tool some information about your extensions, you must write another RDF file called install. RDF. This file should be located at the same level as the contents directory:

C: \ myextensions \

+-Helloworld

+-Install. RDF

+-Content

+-Contents. RDF

-Helloworld-Overlay.xul

The following is the installation configuration file:

<? 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: Name> Hello World </em: Name>

<Em: Id> {12a1584b-2123-473d-8752-e82e74e3cb1b} </em: Id>

<Em: version> 0.1 </em: version>

<Em: targetapplication>

<Description>

<Em: Id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </em: Id>

<Em: minversion> 0.9 </em: minversion>

<Em: maxversion> 1.0 </em: maxversion>

</Description>

</Em: targetapplication>

<Em: File>

<Description about = "urn: Mozilla: Extension: file: helloworld. Jar">

<Em: Package> content/</em: Package>

</Description>

</Em: File>

</Description>

</RDF>

First, we provide an extension description. The descriptions are displayed in Firefox's extended management tool:

<Em: Name> Hello World </em: Name>

<Em: Id> {12a1584b-2123-473d-8752-e82e74e3cb1b} </em: Id>

<Em: version> 0.1 </em: version>

The content in EM: ID is a globally unique identifier (guid ). The purpose of this GUID is to distinguish your extension from other extensions. When writing your own extensions, you always need to generate a new guid for each individual extension. Hoskinson provides a guid generator web service. You can use it to generate a guid.

Next, we will describe which application we want to expand:

<Em: targetapplication>

<Description>

<Em: Id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </em: Id>

<Em: minversion> 0.9 </em: minversion>

<Em: maxversion> 1.0 </em: maxversion>

</Description>

</Em: targetapplication>

Each eXtensible Application under Mozilla has its own guid: You must specify the guid of the program to be extended correctly here. In this example, we use the guid of Firefox. We also describe the minimum and maximum Firefox versions that this extension can work on.

Finally, we will tell the extension management tool the files to be installed. Next, I will introduce how to package extensions so that they can be automatically installed in Firefox:

<Em: File>

<Description about = "urn: Mozilla: Extension: file: helloworld. Jar">

<Em: Package> content/</em: Package>

</Description>

</Em: File>

Packaging an extension Installer

Our expansion is now complete. But to make it easier for users to install it, we need to package it for Firefox installation. We need to package the above file into an xpi (cross platform installer) file. An xpi file is a common ZIP file. The structure of our xpi file is as follows:

Helloworld. xpi

+-Install. RDF

+-Chrome/

+-Helloworld. Jar

Helloworld. jar is another zip file that contains all the files created in the content directory.

Helloworld. Jar

+-Content/

+-Contents. RDF

-Helloworld-Overlay.xul

With the above information, we can use the zip tool to create helloworld. xpi. In addition, you can use a build tool like ant to compile these files. below is the ant build file I used:

<? XML version = "1.0"?>

<Project name = "helloworld" default = "createxpi">

<Target name = "createjar">

<Zip destfile = "helloworld. Jar" basedir = "."

Includes = "content/**"/>

</Target>

<Target name = "createxpi" depends = "createjar">

<Zip destfile = "helloworld. xpi">

<Zipfileset dir = "." supported des = "helloworld. Jar"

Prefix = "Chrome"/>

<Zipfileset dir = "." includes = "Install. RDF"/>

</Zip>

</Target>

</Project>

If you have created a build file named build. xml and put it in the directory at the same level as install. RDF, you can directly run ant to create a. xpi file. After creating an xpi file, you can install the extension in File> open in Firefox.

Download the source code (24kb ZIP file ).

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.