Firefox extended development Tips-related tips

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

Directory structure:
Chrome.mainfest//definition of the entire extended directory structure
INSTALL.RDF//Define extended IDs, names, etc. information
chrome/
chrome/content///Definition Extension interface (. xul file), define the logic (. js file) To implement the function of the extended interface.
chrome/skin///Definition of the image used on the extended interface, property style, skin file, etc. (. css,.ico,.png)
chrome/locale/
chrome/locale/en-us///Definition translation string (. dtd file), attribute translation string (. properties file)
chrome/locale/zh-cn///Definition translation string (. dtd file), attribute translation string (. properties file)
defaults/
defaults/preferences///define the default value (. js file) for which information needs to be saved
components///define method interfaces (. xpt,. dll files) for extended logic

Install extension:
Package the file above the directory structure into a. zip file, and then change the suffix to. xpi, and drag it to the Firefox interface to install the installation interface.

Chrome.mainfest detailed Reading

Sample code Detailed
# on the front Plus ' # ' to indicate a comment
# Register Chrome.manifest
# Specifies the path of the modification to be read, which must be followed by '/' to modify toolbars, menu bars, progress bars,
# and window title bars are all examples of elements this are typically part of the chrome

Content My_extension_name chrome/content/

# Specifies the skin path that will be loaded, followed by the '/'
Skin My_extension_name classic/1.0 chrome/skin/

# Specifies the language path that will be read, followed by the '/'
Locale My_extension_name en-US chrome/locale/en-us/
Locale My_extension_name ZH-CN chrome/locale/zh-cn/

# Add the following file to the previous file
Overlay Chrome://browser/content/browser.xul Chrome://my_extension_name/content/statusbaroverlay.xul

# are 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
# Platform format is as follows:
# content Global-platform Jar:toolkit.jar!/toolkit/content/global-platform/platform

INSTALL.RDF detailed Reading
Reference: Http://developer.mozilla.org/en/Building_an_Extension

<?xml version= "1.0"?>
&LT;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 are required to be added
<em:id> GUID generated under current platform
<em:version> by "." Number of connections
<em:type> the specified number.
2 represents the representative of extensions,4 on behalf of themes,8 LOCALE,32 representative multiple Item Package
<em:targetApplication> Specifies that the extension is used for that application
The format is as follows: <em:id> GUID of the specified application;
<em:minVersion>,<em:maxVersion> the minimum maximum version number for the application, respectively
<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>    Extended name displayed on the application interface

///The following parameter is optional to add
//<em:description>         describe the functionality of this extension
//<em:creator>        Founder
//<em:homepageURL>        Home
//<em:updateURL>         Update Home
//<em:optionsurl>
//<em:abouturl>
//<em: Iconurl>
//<em:developer>        developer
//<em:translator>         Translator
//<em:contributor>          donor
//<em:targetPlatform>    system platform for Target program
//<em:localized>         show some extended information
//<em:locale>    Specify the language in which to display information in the future (necessary), After using the <em:localized>, use the

//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>//firefox GUID
        <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/about.xul</aboutURL>
<iconURL>chrome://dta/skin/common/icon.png</iconURL>
<optionsURL>chrome://dta/content/preferences/prefs.xul</optionsURL>

</Description>
</RDF>

Chrome Detailed:
1 chrome/content/
Content The file types in this folder mainly include. js and. XUL Two kinds
XUL file is mainly used to achieve the interface layout, of course, can also achieve simple logic operation, it is recommended that all logic should be placed in the corresponding. js to deal with, the following gives the example code Statusbaroverlay.xul:
<?xml version= "1.0" encoding= "UTF-8"?>

Defines the multiple language strings used in XUL
<! DOCTYPE overlay SYSTEM "chrome://my_extension_name/locale/statusbaroverlay.dtd" >

All. xul files are added items, IDs can be set casually
<overlay id= "Bc_ext_overlay" xmlns= "Http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >

Declare the. js file you want to use
<script src= "Statusbaroverlay.js"/>
Declare the attributes you want to use multiple language strings
<stringbundleset id= "Stringbundleset" >
<stringbundle id= "ext-strings" src= "chrome://my_extension_name/locale/statusbaroverlay.properties"/>
</stringbundleset>
Add XUL elements to the Firefox interface
Related XUL element features see XUL Tutorials
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 used primarily for the corresponding. XUL logic processing, the following gives the instance code statusbaroverlay.js:
Reference 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");
},

Oncmddownloadall:function (e)
{
Alert ("Download all link");
}

Window.addeventlistener ("Load", function (e) {onLoad (e);}, False);

2 chrome/skin/
The picture, attribute style, skin file, etc. used in XUL (. css,.ico,.png)

3 chrome/locale/
chrome/locale/en-us///Definition translation string (. dtd file), attribute translation string (. properties file)
chrome/locale/zh-cn///Definition translation string (. dtd file), attribute translation string (. properties file)
Define the string to be translated in the. dtd file
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" >

Multi-language characters in the. properties file that hold the attributes to be saved
Sample code:
Statusbaroverlay.properties in the ZH-CN folder
Extensions. {69354808-f0d7-40cc-bb5f-8c1b8f57cecc}.description= is often 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.

Defaults detailed
4 defaults/preferences///define the default value (. js file) for which information needs to be saved
The. js file describes the value of a variable that needs to be permanently saved, and loads the values stored in the. js field at each startup to initialize the elements in the. xul file
Sample code:
To define a default value for a variable
Pref ("Login.time", "");
Pref ("username", "ghostjeky");
Pref ("extensions.{ 69354808-f0d7-40cc-bb5f-8c1b8f57cecc}.description "," chrome://my_extension/locale/statusbaroverlay.properties ") ;//reference Multi-language attribute string

5 components///define Method interface (. XPT,. dll file) for extension logic

6 Several extensions that are commonly used when developing extensions
The DOM Inspector is primarily used to detect the ID of the element at the target location, for example, if you want to add a menu to the back of the main menu-"Tools-" option menu, use the 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"/>
Download Address: https://addons.mozilla.org/zh-CN/firefox/addon/6622
Extension Developer ' s Extension The main test is whether the JavaScript code you wrote is going to execute correctly, and previewing the XUL code is the layout you want.
Set in About:config (only configuration items that are installed with this extension)
browser.dom.window.dump.enabled  = TRUE//allow the dump () statement to output information to the standard console. You can actually see the output of the dump () statement and start Firefox with the-console parameter
Download address: https://addons.mozilla.org/zh-CN/firefox/addon/7434
Javascript debugger is mainly used to debug JS code, but to be able to find in the inside you write JS file is your JS has been properly loaded, first debug menu under the Exclude Browser files in front of the check to remove the
Download Address: https://addons.mozilla.org/zh-CN/firefox/addon/216
Firebug Listen to a lot of people say very good debugging JS, look for errors, but I have not tasted the benefits of it, just to find a JS error
Download Address: https://addons.mozilla.org/zh-CN/firefox/addon/1843