A preliminary study on the expansion and development of Firefox (Firefox) browser

Recently developed a FF extension, automatic completion of the company's meal operation, the main function is very simple: Log on to the site, perform a specific operation, and in the status bar of FF to show the success or failure of the status of the implementation. Previously did not write FF extension, need to learn from scratch, in the completion of this expansion process, some of the harvest recorded, on the one hand, on the other hand, also facilitate the need for students. In the whole development process encountered some problems, but also took some detours, hoping to help other students.
Since it is the first development FF extension, there is little experience, so the first step to search for some of the FF plug-in development documents. First of all about the FF plug-in development of Chinese documents look at the edge, at least to understand the FF extension and plug-in basic information, as well as the basic structure of plug-ins, and in the process of building their own development environment.
Build your own development environment, build their own Firefox development environment, the advantage is that you can casually in this development environment toss, problems will not affect your normal use of Firefox, of course, the use of this model is no problem. The main thing to do in this step is to have
First Step, Firefox starts by adding-no-remote-p develop parameters, where develop represents the developer, and if you have more than one developer you can change the field. Windows system modification method, is the right key Firefox icon, attributes, add this item in the directory, the following figure

Second Step, in order to better debug plug-ins, modify some of the Firefox configuration, specific methods: Firefox address bar input about:config carriage return,
Parameter: javascript.options.showinconsole= true
Role: The error in the Chrome file is displayed in the console.
Parameter: nglayout.debug.disable_xul_cache= true
Function: Turn off the XUL cache, which allows you to change the window and the content of the dialog without restarting. Here, you can use a directory instead of a jar. However, after the overlay change, the overlay document must be overloaded (this one is very useful, and modifying the UXL does not need to restart the window).
Parameter: browser.dom.window.dump.enabled= true
Function: This will allow the dump () function to be exported to the stdout. Reference Window.dump function. Privileged applications can also be nsiconsoleservice.
Parameter: javascript.options.strict= true
Function: Enable strict JavaScript error prompts, JS error debugging available.
Parameter: extensions.logging.enabled= true
Role: This will give you more log information about the installation and updating of plug-ins.
Parameter: nglayout.debug.disable_xul_fastload= true (Gecko 2.0+ only (Firefox 4.0+))
Parameter: dom.report_all_js_exceptions= true
Some of the above parameters in your configuration item already exists, may set the state value is not correct, modified. Some parameters may not be required, and you need to manually create these parameters and values. Just the right button in the list-"New-" Boolean can be.
Understanding the basic file structure of the FF extension


Understand the basic structure of the FF extension, as well as the documentation related to the FF extension. Now the most urgent thing is to create an extension of our own, although we still know INSTALL.RDF, What's in the Chrome.manifest file, but it doesn't prevent us from creating an extension of FF, because FF has given us a tool to build our own extensions, and as a novice I strongly recommend creating an extension package that learns about FF's extended directory structure and file contents. Create a link to the FF extension Https://addons.mozilla.org/en-US/developers/tools/builder, Access this page, as described above each parameter to fill out, and other sites, the asterisk is required. When you are done, click on the bottom button to create your first FF extension, then download the zip package, zip the latter, modify into Xpi, and then drag to your FF, install, restart, see your first FF expansion bar, in order to see the effect, we recommend that the list of attributes are all checked, So you can easily see the plug-ins can show the effect of the.

Without writing a line of code, the first FF extension is complete. Next, we'll take a closer look at the next FF extension file.
INSTALL.RDF file, INSTALL.RDF file is the FF extended installation file, in this file configuration FF extension related information.
<?xmlversion= "1.0" encoding= "UTF-8"?>
&LT;RDF xmlns= "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em= "http://www.mozilla.org/2004/em-rdf#" >
<descriptionabout= "Urn:mozilla:install-manifest" >
<!-extension ID, previous version is a GUID, now popular way is an email address, make sure that this ID on your computer only-->
<em:id>ugg_xchj@hotmail.com </em:id>
<!-2 is the FF extension, this number does not change-->
<em:type>2</em:type>
&LT;!-FF Extended Name-->
<em:name>u-mytest-name</em:name>
&LT;!-FF Extended Version Number-->
<em:version>1</em:version>
Creator and contributor of &LT;!-FF extensions->
<em:creator>ugg</em:creator>
<em:contributor>ugg </em:contributor>
Description of the &LT;!-FF extension->
<em:description>u-description</em:description>
&LT;!-FF extension of the section, can be a URL, can also be extended within a window of a window->
<em:aboutURL>chrome://u-packagename/content/about.xul</em:aboutURL>
&LT;!-FF Extended Options section, can be a Web site, can also be an extension of a window window, the option section and the extension of the defaults\preferences under the relationship between the file, you can set some of the default values of variables->
<em:optionsURL>chrome://u-packagename/content/options.xul</em:optionsURL>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-firefox, this GUID cannot be changed, it means ff-->
<em:minVersion>0.3</em:minVersion> <!-the lowest supported version-->
<em:maxVersion>8.0a1</em:maxVersion> <!-the highest supported version-->
</Description>
</em:targetApplication>
</Description>
</RDF>

In addition to these parameters, INSTALL.RDF has other parameters, the details can be learned from the https://developer.mozilla.org/en/install_manifests

chrome.manifest File
Content U-na chrome/content/
Overlay Chrome://browser/content/browser.xul Chrome://u-na/content/ff-overlay.xul
Defines the content path for the U-na package, using FF-OVERLAY.XUL in the plug-in to overwrite Browser.xul in the browser.
Chrome.manifest function is not only this, but also can define a lot of content, the detailed description of this document can refer to Https://developer.mozilla.org/en/chrome_registration

xul File
XUL (XML user interface language) is a Mozilla xml-based language that can quickly build an application's interface. Mozilla's interface elements, such as the status bar, toolbars, buttons, and so on, need to set XUL to change or control the FF interface, the detailed introduction of XUL reference Https://developer.mozilla.org/en/xul. We can refer to the XUL control under the status bar
<statusbarid= "Status-bar" >
<statusbarpanelid= "Dcdingcan"
Label= "Landing ..." The status bar displays information in the lower-right corner
context= "Stockmenu"
onclick= "Dingcan.display (") "Click to trigger events, this event has JS control
/>
</statusbar>

All of the above are the simplest content, and if you want to make fancy you need to view the MDN document in detail. With this basic knowledge, we are back to my previous needs. I want to do a ff extension, in this extension can set the login user's account and password, when the FF open, press the given username and password to log in to the company to order the site, the implementation of success or failure in the state given a hint. Final implementation, set domain account password

Status display after FF is turned on
，，
code Download, click here

The

Implementation function is very simple, the code is also relatively simple, do not do detailed introduction, probably say I have developed the process encountered some problems.

       Q: How plug-ins in the development process are debugged in FF.
       A: Remember the <em:id>ugg_xchj@hotmail.com</em:id> field in INSTALL.RDF. In your computer C:\Documentsand settings\ username \application Data\mozilla\firefox\profiles\dqfrxoai.default\ Extensions directory to create a file named Ugg.xchj@hotmail.com, the contents of the file is developing the FF extension of the absolute path, such as D:\m\ffex\myffex\helloword. Then reboot the FF tool-see your plugin in the Attachment Component Manager.

       Q: Why the extension I created cannot be loaded into FF
       A: There are several main aspects, 1: Ensure that the Install.rdf,chrome.manifest file format is correct, the best way is to directly modify the existing FF expansion pack install.rdf,chrome.manifest files, generally these two files error, FF in the load extension process will be interrupted, can not load other components. 2: Coding problems, once your file appears in Chinese, be sure to use the Utf-8 format to save the file, or it will fail to load, the extension does not show, we recommend that all files are in utf-8 format.

      Q: If the Xpi file is packaged.
       A: Use WinRAR or WinZip to package zip and modify it into XPI format. Note that to package the file directory that contains the INSTALL.RDF, you will be prompted that the XPI package is corrupted, cannot be installed, and the compression is selected as storage.

What is the use of the

      Q:JS code in FF extension development?
      A:FF Expansion of the development process, using XUL to develop the extension of the interface of FF, while using JS to develop the extension of the processing logic, in my meal to provide the plugin, use JS landing site, to perform operations. JS processing logic is very important, I use the JS file has been written, it is easy to develop Google's extension, ie, expansion of plug-ins. Therefore, the development of browser expansion, more is the development of JS logic.
      Learning FF extension, the best way is to read more people write ff extension, download the extension of others, the XPI modified into a zip, direct decompression look inside the structure, development can be, learning process quickly. Another good to go out is the FF development community, read more MDN documents, such as the following is the official creation of a FF extension process. Https://developer.mozilla.org/en/Building_an_Extension

resources:
Develop your first FF plugin http:// blog.osqdu.org/develop-your-first-firefox-plugin_129.shtml
install,manifest file field Description https:// Developer.mozilla.org/en/install_manifests
Create a FF plug-in https://developer.mozilla.org/en/Building_an_Extension