A Preliminary Study on Firefox browser extension development

Recently, a FF extension was developed to automatically complete the ordering operation of the company. The main function is simple: log on to the website and perform a specific operation, in the FF status bar, the execution succeeded or failed status is displayed. I have never written FF extensions before, and I need to learn from the beginning. In the process of expansion, I have recorded some gains. On the one hand, I have recorded my own records, and on the other hand, I am also able to help students who have this need. I encountered some problems throughout the development process and made some detours, hoping to help other students.
Because it is the first Development of FF extension, there is no experience, so the first step is to search for some documents about FF plug-in development. First, read almost all the Chinese documents on FF plug-in development to understand at least the basic information of FF extension and plug-in, and the basic structure of the plug-in, and build your own development environment in this process.
Build your own Development EnvironmentTo build your own Firefox development environment, the advantage is that you can freely toss in this development environment, the problem will not affect your normal use of Firefox, of course, the use of this mode is no problem. The main tasks in this step are:
Step 1When Firefox is started, add the-no-remote-P develop parameter, where develop represents the developer. If there are multiple developers, you can modify this field. In Windows, right-click the Firefox icon and add this option to the directory, as shown in figure

Step 2To better debug the plug-in and modify some Firefox configurations, enter "about: config" in the address bar of Firefox and press Enter,
Parameter: javascript. Options. showinconsole = true
Purpose: Display errors in chrome files on the console.
Parameter: nglayout. Debug. disable_xul_cache = true
Purpose: Disable the XUL cache, which allows you to change the window and dialog content without restarting. Here, you can use directories instead of jar. However, after overlay is changed, the overlay document must be reloaded (this item is very useful and you do not need to restart the window after modifying uxl ).
Parameter: browser. Dom. Window. Dump. Enabled = true
Purpose: this will allow the dump () function to be output to stdout. Refer to the window. Dump function. Privileged applications can also use nsiconsoleservice.
Parameter: javascript. Options. Strict = true
Purpose: Enable the strict JavaScript error prompt. js error debugging is available.
Parameter: extensions. Logging. Enabled = true
Purpose: Provide more log information about installing and updating the plug-in.
Parameter: nglayout. Debug. disable_xul_fastload = true (gecko 2.0 + (Firefox 4.0 +) only ))
Parameter: Dom. report_all_js_exceptions = true
Some of the preceding parameters already exist in your configuration items. If the status value is incorrect, modify them. Some parameters may not exist. You need to manually create these parameters and values. You only need to right-click "CREATE" in "list" and choose "Boolean.
Understand the basic file structure of FF Extension

Understand the basic structure of FF extension and the documentation related to FF extension. Now, the most urgent thing is to first create an extension of our own, although we still know about install. RDF, chrome. what is in the manifest file, but it does not prevent us from creating a FF extension, because FF has provided us with a tool to generate our own extensions, as a beginner, I strongly recommend creating an extension package to learn FF's extension directory structure and file content. Create FF extension links. After entering this information, click the button at the bottom to create your first FF extension. Then, download the zip package and change the zip package to xpi, drag it to your ff, install it, restart it, and check your first FF extension. To see the effect, we recommend that you check all the attributes of this series, in this way, you can easily see the effect that the plug-in can display.

No code is written, and the first FF extension is complete. Next, let's take a closer look at the FF extension file.
Install. RDF file. The Install. RDF file is the FF extension installation file. In this file, configure FF extension information.
<? Xmlversion = "1.0" encoding = "UTF-8"?>
<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">
<! -Extended ID. The previous versions are all guids. The popular method is e-mail address. Make sure this ID is unique on your computer -->
<Em: Id> ugg_xchj@hotmail.com </em: Id>
<! -2 indicates FF extension. Do not change this number. -->
<Em: type> 2 </em: type>
<! -FF extension name -->
<Em: Name> U-mytest-name </em: Name>
<! -FF extension version -->
<Em: version> 1 </em: version>
<! -FF extension creator and contributor->
<Em: Creator> Ugg </em: Creator>
<Em: contributor> Ugg </em: contributor>
<! -FF extension description->
<Em: Description> U-description </em: Description>
<! -FF extensions can be a Web site or a window in the extension.->
<Em: abouturl> chrome: // U-packagename/content/about. XUL </em: abouturl>
<! -The option part of the FF extension can be a Web site or a window in the extension. The option part is related to the file under the defaults \ preferences extension, you can use this section to set the default values of some variables->
<Em: optionsurl> chrome: // U-packagename/content/options. XUL </em: optionsurl>
<Em: targetapplication>
<Description>
<Em: Id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </em: Id> <! -Firefox, The GUID cannot be changed, which indicates 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 also has other parameters. For details, refer to 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 of the U-Na package and overwrites browser. XUL in the browser with the ff-overlay.xul in the plug-in.
Chrome. manifest does not just that, but can also define a lot of content, detailed descriptions of this file can refer to https://developer.mozilla.org/en/chrome_registration

XUL File
XUL (XML user interface language) is Mozilla's XML-based language that allows you to quickly build an application interface. Mozilla has many interface elements, such as the status bar, toolbar, and buttons. You need to set XUL to change or control the FF interface. For details about XUL, refer to https://developer.mozilla.org/en/xul. We can refer to the XUL control of the status bar.
<Statusbarid = "status-bar">
<Statusbarpanelid = "dcdingcan"
Label = "logging in..." status bar display information in the lower right corner
Context = "stockmenu"
Onclick = "dingcan. Display ('') "click to trigger the event, which is under JS control.
/>
</Statusbar>

The above are the simplest content. If you want to make a fancy content, you need to view the MDN document in detail. With these basic knowledge, we can go back to my previous needs. I want to implement a FF extension. In this extension, I can set the account and password for logging on to the user. When FF is opened, I log on to the ordering website with the given username and password, after the execution is successful or fails, a prompt is displayed in the status. Finally, set the domain account password

Status display after FF is enabled
,,

Download the code. Click here

The implementation function is very simple, and the code is relatively simple. I will not introduce it in detail. Let's talk about some problems I encountered during the development process.

Q: How can I debug plug-ins in FF during development?
A: Do you still remember the <em: Id> ugg_xchj@hotmail.com </em: Id> Field in install. RDF? In your computer c: \ documentsand Settings \ User Name \ Application Data \ Mozilla \ Firefox \ profiles \ dqfrxoai. the Default \ extensions directory creates a file named ugg.xchj@hotmail.com with the content of an absolute path to the FF extension being developed, such as D: \ m \ ffex \ myffex \ helloword. Then restart ff to see your plug-in the "tool-" attachment component manager.

Q: Why cannot I load the extension I created into ff?
A: There are several main aspects. 1: Ensure install. RDF, chrome. the manifest file format is correct. The best way is to directly modify the install of the existing FF extension package. RDF, chrome. manifest file. Generally, these two files have an error. FF will be interrupted when loading the expansion process and cannot load other components. 2: encoding problem. Once your file contains Chinese characters, make sure to save the file in UTF-8 format. Otherwise, the file will fail to be loaded and the extension will not be displayed. We recommend that all files use UTF-8 format.

Q: How can I package an xpi file?
A: Use WinRAR or WinZip to package the ZIP file and modify it to xpi format. Note: You must package the file directory containing install. RDF. Otherwise, the system will prompt that the xpi package is damaged and cannot be installed. In addition, the compression method is stored.

Q: How can JS Code be used in FF extension development?
A: In the extended development process of FF, XUL is used to develop the Extended Interface of FF, while JS is used to develop the extended processing logic. In my provided ordering plug-in, JS is used to log on to the website, perform the operation. JS processing logic is very important. I use the JS files that have been written, and it is easy to develop Google extension plug-ins, ie extension plug-ins. Therefore, the development of browser extension is more about JS logic development.
The best way to learn about FF extensions is to look at FF extensions written by others, download extensions from others, change xpi to zip, decompress the extensions directly, and develop the extensions, the learning process is fast. Another good idea is the FF development community. Read more about the MDN documentation. For example, the following is the official process of creating a FF extension. Https://developer.mozilla.org/en/Building_an_Extension

References:

Develop your first FF plug-in

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 plugin https://developer.mozilla.org/en/Building_an_Extension