Firefox Browser plugin Development Introductory Tutorial

Many netizens want to learn Firefox browser plug-in development this aspect of knowledge, however, at present, many data are more obscure, not very suitable for beginners. So, beginners want to learn Firefox browser plug-in development how to get started it? Let's take a look at today's Firefox plugin development Primer Tutorial!

Firefox browser

First you need to know what a "Firefox plugin" is. The "plugin" here is just a popular saying, in fact, Firefox this extension of the "plug-in" includes: Extended extension and plug-in plugin.

The explanation of the Firefox official website is: Extensions are small add-ons that add new functionality to your Mozilla program. Plugins are programs that allow websites the content to and provide the it have in appear your. (Extensions are additional software that can add new functionality to Mozilla, and Plug-ins are programs that allow websites to provide you with content and display in a browser.) In layman's terms, "extension" is based on Firefox itself added some of the practical features, and "plug-in" is a stand-alone program in addition to Firefox, used to display Web pages specific content such as Flash, video and Java.

In fact, what we need to develop is extension.

To develop extension, you can take a few steps:

1. Understand what is extension, the general ready-made extension how to make up? What is the specific function of each file contained inside?

2. Understand the mechanism of Firefox to handle running extension. such as the xpcom,chrome mechanism.

3. Take a look at the introductory example, use Notepad, do a simple extension, run it. In addition, use Firefox, download some common extensions, and view the source code of others.

4. Formally build the development environment.

5. While learning someone else's code, modify the code to achieve its own extension.

First and second steps:

Need to understand: chrome,rdf,manifest,xul,xpcom and other concepts.

Extension (extensions)

Extensions add new features to Mozilla Firefox. Extensions can simply add a toolbar button, or you can implement a complete new feature. Extensions can make Firefox more suitable for individual needs.

Extensions is different from plugins (plug-in). Plug-ins Help browsers display special content, such as playing multimedia files. The common plug-in is Flash Player. and extensions and search engine plug-ins are different, search engine plug-ins just in the search bar to add more than one search engine address.

An extension, usually a xpi (cross-platform Installer Module) package, is actually a zip-type compression package containing the necessary files. In Figure 1 below, the directory structure of the files and files included in a standard extension is shown.

Firefox Extended directory structure

In the above image, the content directory stores the extended description of the XUL file and the JavaScript file that adds behavior. The locale directory is for localization-related files. If you need to support English and Chinese, you can create a new en-US and ZH-CN directory under the locale directory to hold the appropriate localized string. The skin directory holds a number of CSS files that define the appearance of the extension. Chrome.manifest is a Chrome-registered manifest file (see section 2.2). The INSTALL.RDF contains information about the extended installation, respectively.

Chrome

Chrome refers to a collection of user interface elements outside the content area of the application window, which include toolbars, menus, progress bars, and window title bars. A chrome provider can provide chrome for a specific window type, such as a browser window. There are three basic types of chrome providers:

Content: is typically a XUL (XML User Interface Language) file. The Xul file will specify the interface and functionality to extend the performance of the runtime in Firefox. A XUL file is a JavaScript file designed to describe the contents of a window and a dialog box.

L Region (Locale): Store localized information.

L Skin (Skin): Describes the appearance of chrome. Typically contains CSS and image files.

XULRunner

The XULRunner project provides a set of Mozilla run support packages called XULRunner for launching programs based on xul+xpcom (see section 2.4), such as Firefox,thunderbird,sunbird. It provides a variety of mechanisms, including installation, upgrades, and removal of these software features.

and Firefox the entire program main interface and extended interface are described by XUL file, so in the Firefox running process, and the expansion of the use of the process, are relying on xulrunner to support.

XPCOM

XPCOM (Cross Platform) is a Cross-platform Component Object model, similar to Microsoft's COM. It has a variety of language binding (Language Binding) that makes the XPCOM component available and implemented in C + +, JavaScript, Java, and Python. The XPCOM interface is defined by the name Xpidl (Interface definition Language).

XPCOM itself provides a set of core components and categories, such as file and memory management, threading, basic data structures (strings, arrays, variants), and so on. Most XPCOM components are not provided by core components, but are provided by other platforms or applications, or even by extension kits.

In Firefox, most of the functions are based on the xpcom mechanism. For example, the interface provided by Firefox for extended development is implemented in a xpcom way.

For example GRDF = components.classes["@mozilla. Org/rdf/rdf-service;1"]

. GetService (Components.interfaces.nsIRDFService);

A Nsirdfservice instance of the RDF module will be obtained.

Xpinstall

Xpinstall (Cross-platform Install) is the technology used to install extensions in Mozilla series software or other XUL based software. In the source code of Firefox2.0, there is a folder named Xpinstall that holds code related to the Xpinstall module.

In addition, it is necessary to point out that Firefox extensions are divided into common default extensions and custom installation extensions. The normal default extension does not have custom installation code, and the entire installation process is performed by the Firefox default process. The installation package for custom installation extensions has custom installation process information. This information is written in specialized JavaScript code and is implemented by invoking the API provided by Xpinstall. Custom installation extensions, a common example is the use of Firefox to open the expansion center, click on an extension can be installed online, which is called the Xpinstall API.

A simple understanding of the Firefox extension composition instructions and Firefox processing extension process analysis.

Step Three:

According to this simple tutorial, try Hello World:

Another is to download some extensions to the Firefox official website to study it.

After installation, the extension code will be on the disk in this location:

C:documents and Settingsusernameapplication datamozillafirefoxprofilesprofileextensions

Fourth Step:

Formally start using the development environment.

1.Firefox installation-related extensions: Firebug,1.firefox 3.0, this must be necessary. This recommendation 3.0, because the latest version 3.6 or 3.7, those extensions have not been updated to follow, so to install more extensions, or 3.0 as well.

2.Firebug, this needn't say much. Although I am just a rookie, just use this to locate some XUL elements corresponding to what code, but help a lot. And then to Firebug's official website, download Chromebug: (with Chromebug to better debug their own written chrome file)

Because debugging JS need to switch off Firefox, too much trouble, so some code can be tested in the Firebug console first. Tested in FIREFOX7.

3.Extension Developer. Website recommended, of course, installed. This is a set of Firefox extensions, including packaged XPI features, preview XUL and so on.

4.Spket IDE. Development of the expanded IDE, the official website recommended, more useful. But I don't think I can pack xpi and test it. But it's just as good as an editor. Use it to see other people's extended code, very comfortable ...

5.xul Explorer. Preview the Xul effect.

6.emEditor. Quickly open the code file and make changes. The other most important features are: find. When you study someone else's code, the JavaScript code is spinning around and it's hard to find the definition of certain variables or objects. With EmEditor "Find in the file" function, the function is very large, find out the results have a preview ... (later found, you can also directly use the Spket IDE's Search--file function, similar to the Eclipse's lookup function, but the disadvantage is that there is no preview, each time you double-click to know how to match.) )

7. In addition, it is customary to use Eclipse + Spket + xulbooster + Firefox

Fifth Step:

Slowly learn javascript,css and some details of the technology. Try to modify the existing extension and add the function you want.