Firefox extension development practices

Before writing an article, review your ignorance.

Firefox is open-source and everyone on Earth knows it. Before getting started with FF extension development in current projects, I always thought fF was developed in Java (Java and open source have always been equals ). Now I understand that many open-source projects, like ff, are developed in C/C ++, and are familiar with MySQL and PHP. Really a Grade Error, like I think that mobile storage devices only U disk and mobile hard disk, in fact there are SD card, MINI-SD card, TF card, CF card, mmccard, etc., ignorance ah...

 

OK. Let's get started with this nonsense. This article consists of six parts:

1. FF extension overall cognition

2. Build a Development Environment

3. Development Instance (custom right-click sub-menu)

4. Program release

5. development experiences

6. Technical Reference

 

(1) Overall FF extension Cognition

FF is based on the Mozilla kernel. Its browser engine functions are mainly implemented in C language, but the operations on its browser interface and its interface are completed by JS and XUL, this is the power of ff, and it also provides a good extension mechanism for everyone.

FF extended development directory structure:

-- Content

-- [Main JS & XUL files]

-- Locale

-- En-US

-- [Some DTD or properties files]

-- [Other ages]

-- Skin

-- [Some CSS files or pictures]

-- Defaults

-- Preferences

-- Components [Optional]

-- Chrome. manifest

-- Install. RDF

-- Install. js [Optional]

 

 

FF working method:

For any new development language or environment, we usually try to find the entry point of the program. It can be very responsible to tell you that any compiled (interpreted) development language program has a function similar to the main function in C and the main class in Java (public static void main function) and the entry function (static void/INT main) in C.

 

JS program loading entry in this instance:

<MCE: Script Type = "application/X-JavaScript"> <! -- <Br/> If (window. onloadregistry) <br/> onloadregistry. push (zoiq. IFRAME. onload); <br/> else <br/> window. addeventlistener ("LOAD", zoiq. IFRAME. onload, false); <br/> window. addeventlistener ("Unload", zoiq. IFRAME. onUnload, false); <br/> // --> </MCE: SCRIPT> <br/>

 

XPCOM introduction:

 

(2) Development Environment Construction

If you are familiar with FF extension's file directory structure, you can do the development of Firefox extension without using any IDE. Whether or not IDE is used, we recommend that you use ant (the legendary Java compilation tool) to compile and manage FF extension projects.

The following describes two commonly used FF extension IDE. The two have their own advantages and disadvantages. You can choose one based on your hobbies.

1. foxbeans (netbeans)

 

2. spket

This is the FF extension development tool officially recommended. It is placed in the second place because its development method is semi-automated: it has good function prompting functions, however, you need to use debugging tools such as Venkman for debugging and manually package and deploy them.

 

For details about the spket cracking method, refer to my previous article:

Http://blog.csdn.net/wirror800/archive/2010/05/29/5633172.aspx

 

Fortunately, a basic build. xml file is provided in the FF extension project created by spket. We can modify the build. xml file and use ant to compile the entire project. In addition, the project may need to be frequently compiled during the development process. We can write a simple BAT file for fast compilation.

D: <br/> Cd D:/workspace/ffdemo <br/> ant <br/> pause

(3) Development Instance (custom right-click sub-menu)

Now you want to implement a function. In an IFRAME on this site, modify FF's contextmenu.

To complete such a function, we need to develop two types of code: XUL and Js.

Right-click the XUL of the menu item:

<Popup id = "contentareacontextmenu"> <br/> <menuitem id = "context-zoiqtab" label = "open in zoiq" oncommand = "zoiqtab. onmenuitemcommand (event); "insertafter =" context-openlinkintab "/> <br/> </popup>

Implement the JavaScript code customized by right-click menu:

VaR zoiqtab = {<br/> getzoiqiframe: function () {<br/> var iframewin = NULL; <br/> var iframeparent = gbrowser. selectedbrowser. contentdocument. getelementbyid (zoiq. IFRAME. getconst ("popupmodalid"); <br/> var iframetarget = NULL; <br/> If (iframeparent) {<br/> iframetarget = iframeparent.content##doc ument. getelementbyid (zoiq. IFRAME. getconst ("targetframeid"); <br/> If (iframetarget) {<br/> iframewin = Iframetarget; <br/>}< br/> return iframewin; <br/>},</P> <p> initoverlay: function () {<br/> var menu = document. getelementbyid ("contentareacontextmenu"); <br/> menu. addeventlistener ("popupshowing", zoiqtab. contextpopupshowing, false); <br/>}, </P> <p> contextpopupshowing: function () {<br/> var menuitem = document. getelementbyid ("context-zoiqtab"); <br/> var inzoiqiframe = (zoiqtab. getzoiqifram E () = NULL )? False: true; <br/> If (menuitem) {<br/> menuitem. Hidden =! Gcontextmenu. onlink |! Inzoiqiframe; <br/>}< br/> If (inzoiqiframe) {<br/> gcontextmenu. showitem ("context-openlink", false); <br/> gcontextmenu. showitem ("context-openlinkintab", false); <br/>}< br/>}, </P> <p> onmenuitemcommand: function () {<br/> // gcontextmenu. openlinkintab (); <br/> // gbrowser. selectedbrowser. loaduri ('getlinkurl' in gcontextmenu? Gcontextmenu. getlinkurl (): gcontextmenu. linkurl (); <br/> var iframetarget = zoiqtab. getzoiqiframe (); <br/> If (iframetarget) {<br/> iframetarget. contentWindow. location = ('getlinkurl' in gcontextmenu? Gcontextmenu. getlinkurl (): gcontextmenu. linkurl (); <br/>}< br/> };

Then, when the program is loaded, call the zoiqtab. initoverlay () method:

Onload: function () {<br/> zoiqtab. initoverlay (); <br/> var appcontent = document. getelementbyid ("appcontent"); <br/> If (appcontent) {<br/> appcontent. addeventlistener ("domcontentloaded", zoiq. IFRAME. onpageload, true); <br/>}< br/>}

(4) program release

If you
Extension's file directory structure is very familiar. Of course, we can do the development of Firefox extension without using any IDE. Whether or not IDE is used, we recommend that you use
Ant (the legendary Java compilation tool) to compile and manage FF extension projects.

Program release directory structure:

-- Chrome

-- Ffdemo. Jar

{

-- Content

-- [Main JS & XUL files]

-- Locale

-- En-US

-- [Some DTD or properties files]

-- [Other ages]

-- Skin

-- [Some CSS files
Or pictures]

}

-- Defaults

-- Preferences

-- Components [Optional]

-- Chrome. manifest

-- Install. RDF

-- Install. js [Optional]

 

 

(5) development experiences

1. Read Online MDC documentation

2. Try to use the existing FF built-in functions to complete some functions, which can reduce the chance of errors. For built-in functions, see chrome: // Browser/content/Brower. JS, chrome: // Browser/content/Brower. XUL and other files (decompress the jar files under the FF installation directory, or view-source in the browser, or view the online FF source code http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.js00001000to ). Here, you can find definitions of global variables such as gbrowser and gcontextmenu, and some unknown hidden APIs.

3. Try to use the OO idea to write JS programs, which can enhance the readability and reusability of the programs.

4. Refer to some extended source code released by other experts on the FF add-ons website.

(6) Technical Reference

1. Online MDC documentation

Https://developer.mozilla.org/en/DOM/window

Https://developer.mozilla.org/en/DOM/document

Https://developer.mozilla.org/en/Code_snippets/Tabbed_browser

View-source: chrome: // Browser/content/browser. js
View-source: chrome: // Browser/content/nscontextmenu. js

......

2. Technical Forum/chat room

 

3. Add-ons for Firefox

Https://addons.mozilla.org/en-US/firefox/