Firefox extension development skills

Firefox Extension
Reference: http://developer.mozilla.org/en/Extensions
Http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/

Directory structure:
Chrome. mainfest // define the entire extended directory structure
Install. rdf // define the extended ID, name, and other information
Chrome/
Chrome/content // define the extension interface (. xul file) and define the logic of the extension interface implementation function (. js file)
Chrome/skin // defines the image used on the extended interface, including the style and skin file (.css,.ico,.png)
Chrome/locale/
Chrome/locale/en-US // defines the translation string (. dtd file) and the property translation string (. properties file)
Chrome/locale/zh-CN // defines the translation string (. dtd file) and the property translation string (. properties file)
Defaults/
Defaults/preferences // defines the information to be saved. Default Value (. js file)
Components // define the method interface used for the extension logic (. xpt,. dll file)

Installation extension:
Package the directory structure file into a. ZIP file, and then change the suffix to. xpi. Drag it to the firefox interface and the installation interface will pop up.

Chrome. mainfest

// Sample code
# Add "#" to the front to indicate comments
# Register chrome. manifest
# Specify the path of the modified content to be read. "/" must be followed to modify Toolbars, menu bars, and progress bars,
# And window title bars are all examples of elements that are typically part of the chrome

Content my_extension_name chrome/content/

# Specify the path of the skin to be loaded, followed "/"
Skin my_extension_name classic/1.0 chrome/skin/

# Specify the language path to be read, followed "/"
Locale my_extension_name en-US chrome/locale/en-US/
Locale my_extension_name zh-CN chrome/locale/zh-CN/

# Add the following files to the previous files
Overlay chrome: // browser/content/browser. xul chrome: // my_extension_name/content/statusbarOverlay. xul

# Optional parameters
# Style chrome: // URI-to-style chrome: // stylesheet-URI [flags]
# Override chrome: // package/type/original-uri.whatever new-resolved-URI [flags]
# Resource aliasname uri/to/files/[flags]
# Application = app-ID
# Appversion operator version (OPERATOR: "=", "<", ">", "<=", "> = ")
# OS = WINNT (Operating System)
# Osversion> = 10.5
# The platform format is as follows:
# Content global-platform jar: toolkit. jar! /Toolkit/content/global-platform/platform

Install. rdf read details
Reference: http://developer.mozilla.org/en/Building_an_Extension

<? 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">

// The following parameters must be added
// <Em: id> GUID generated on the current platform
// <Em: version> number connected "."
// <Em: type> specifies a number.
// 2 stands for Extensions, 4 stands for Themes, 8 stands for Locale, and 32 stands for Multiple Item Package
// <Em: targetApplication> specify the extension used by the application.
// Format: <em: id> GUID of the specified application;
// <Em: minVersion> and <em: maxVersion> are the minimum and maximum versions of the application.
// <Em: targetApplication>
// <Description>
// <Em: id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </em: id>
// <Em: minVersion> 1.5 </em: minVersion>
// <Em: maxVersion> 2.0.0. * </em: maxVersion>
// </Description>
// </Em: targetApplication>

// <Em: name> the extension name displayed on the application interface

// The following parameters can be added.
// <Em: description> describes the extended functions.
// <Em: creator> Founder
// <Em: homepageURL> Home Page
// <Em: updateURL> Update the Home Page
// <Em: optionsURL>
// <Em: aboutURL>
// <Em: iconURL>
// <Em: developer> developer
// <Em: translator> translator
// <Em: contributor> donor
// <Em: targetPlatform> System Platform of the Target Program
// <Em: localized> display the extended information in a centralized manner.
// <Em: locale> specifies the language in which information will be displayed (required). It is used after <em: localized>

// Example:
<Em: id> {69354808-F0D7-40CC-BB5F-8C1B8F57CECC} </em: id>
<Em: version> 0.91 </em: version>
<Em: type> 2 </em: type>
<Em: name> statusbar settor </em: name>

// The target program is firfox.
<Em: targetApplication>
<Description>
<Em: id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </em: id> // The GUID of firefox
<Em: minVersion> 1.5 </em: minVersion>
<Em: maxVersion> 2.0.0. * </em: maxVersion>
</Description>
</Em: targetApplication>

// Add optional information
// <Creator> Federico Parodi </creator>
// <Creator> Stefano Verna </creator>
// <Creator> Nils Maier </creator>
// <Developer> Federico Parodi </developer>
// <Developer> Stefano Verna </developer>
// <Developer> Nils Maier </developer>
// <AboutURL> chrome: // dta/content/about. xul </aboutURL>
// <IconURL> chrome: // dta/skin/common/icon.png </iconURL>
// <HomepageURL> http://downthemall.net/// <OptionsURL> chrome: // dta/content/preferences/prefs. xul </optionsURL>

</Description>
</RDF>

Chrome details:
1 chrome/content/
The file types in the content folder mainly include. js and. xul.
The. xul file is mainly used to implement the interface layout. Of course, it can also implement simple logical operations. We recommend that all logic be processed in the corresponding. js file. The following example code statusbarOverlay. xul is provided:
<? Xml version = "1.0" encoding = "UTF-8"?>

// Define the multilingual strings used in xul
<! DOCTYPE overlay SYSTEM "chrome: // my_extension_name/locale/statusbarOverlay. dtd">

// All. xul files must be added, and the id can be set at will
<Overlay id = "bc_ext_overlay" xmlns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

// Declare the. js file to be used
<Script src = "statusbarOverlay. js"/>
// Declare the attribute multi-language string to be used
<Stringbundleset id = "stringbundleset">
<Stringbundle id = "ext-strings" src = "chrome: // my_extension_name/locale/statusbarOverlay. properties"/>
</Stringbundleset>
// Add the xul element to the firefox Interface
// For the xul element features, refer to the xul tutorial.
// Reference: http://developer.mozilla.org/en/XUL_Tutorial

<Popup id = "contentAreaContextMenu">

<Menuitem image = "chrome: // my_extension_name/skin/download_all.png" class = "menuitem-iconic" id = "download_all_item" label = "& download_all_text ;"

Insertafter = "context-selectall" oncommand = "onCmdDownloadAll (event)"/>

<Menuitem image = "chrome: // my_extension_name/skin/download_link.png" class = "menuitem-iconic" id = "download_link_item" label = "& download_link_text ;"

Accesskey = "& download_link_text.accesskey;" insertafter = "context-selectall" oncommand = "onCmdDownloadSingleLink (event)"/>

<Menuseparator id = "seperator_1" insertafter = "context-selectall"/>

</Popup>
</Overlay>

The. js file is mainly used for logic processing in. xul. The following example code statusbarOverlay. js is provided:
See javescription script syntax
OnLoad: function ()
{
// Initialization code
This. initialized = true;
This. strings = document. getElementById ("bc_ext-strings ");
Document. getElementById ("contentAreaContextMenu"). addEventListener ("popupshowing", onContentPopupMenu, false );
},
OnCmdDownloadSingleLink: function (e)
{
Alert ("download single link ");
},

Onselldownloadall: function (e)
{
Alert ("download all link ");
}

Window. addEventListener ("load", function (e) {onLoad (e) ;}, false );

2 chrome/skin/
Save the image used in .xul, skin file, and so on (.css,.ico,.png)

3 chrome/locale/
Chrome/locale/en-US // defines the translation string (. dtd file) and the property translation string (. properties file)
Chrome/locale/zh-CN // defines the translation string (. dtd file) and the property translation string (. properties file)
The. dtd file defines the string to be translated.
Sample Code:
StatusbarOverlay. dtd in the zh-CN folder
<! ENTITY download_link_text "download this connection">
<! ENTITY download_all_text "Download all connections">
StatusbarOverlay. dtd in the en-US folder
<! ENTITY download_link_text "download this link">
<! ENTITY download_all_text "download all links">

The. properties file stores the multilingual characters of the attributes to be saved.
Sample Code:
StatusbarOverlay. properties in the zh-CN folder
Extensions. {69354808-F0D7-40CC-BB5F-8C1B8F57CECC}. description = is commonly used to download http links.
StatusbarOverlay. properties in the en-US folder
Extensions. {69354808-F0D7-40CC-BB5F-8C1B8F57CECC}. description = it used to download http links.

Detailed description of ults
4 defaults/preferences // defines the information to be saved. Default Value (. js file)
The. js file describes the value of the variable that needs to be permanently saved. At each startup, it loads the value saved in the. js field to initialize the element in the. xul file.
Sample Code:
// Define the default value for the variable
Pref ("login. time ","");
Pref ("username," ghostjeky ");
Pref ("extensions. {69354808-F0D7-40CC-BB5F-8C1B8F57CECC}. description", "chrome: // my_extension/locale/statusbarOverlay. properties"); // reference multilingual attribute strings

5 components // define the method interface for the extension logic (. xpt,. dll file)

6. Several extensions are often used for development and expansion.
DOM Inspector is mainly used to detect the id of the element at the target position. For example, you want to add a menu after the main menu-> Tools-> option menu, you only need to use DOM Inspector to detect that the option menu id is

Menu_preferences, then your xul can write <menuitem id = "myid" insertafter = "menu_preferences" label = "mymenuitem"/>
: Https://addons.mozilla.org/zh-CN/firefox/addon/6622
Extension Developer's Extension is mainly used to test whether the javascript code you wrote can be correctly executed and to preview whether the xul code is the layout you want.
Set in about: config (configuration items only available when this extension is installed)
Browser. dom. window. dump. enabled = true // you can use the dump () statement to output information to the standard console. You can see the output of the dump () Statement and use the-console parameter to start firefox.
: Https://addons.mozilla.org/zh-CN/firefox/addon/7434
Javascript debugger is mainly used to debug js code, but to find the js file you wrote in it, the premise is that your js has been correctly loaded, remove the check box before Exclude Browser Files in the Debug menu.
: Https://addons.mozilla.org/zh-CN/firefox/addon/216
Firebug many people say it is very useful to debug js and find errors, but I have never understood its advantages, but it is only used to find js errors.
: Https://addons.mozilla.org/zh-CN/firefox/addon/1843