Try to develop a plugin for Firefox today. Although relatively simple, there are many tutorials on the web, but feel that some of the tutorial is difficult to write, in the initial development process and did not use those things, so I recorded the development process. I was developed according to the official Mozilla tutorial, interested friends can see for themselves: Https://developer.mozilla.org/en/Building_an_Extension.
According to the General tutorial, the first program is to use the simplest Hello world, now we make a Firefox Hello World plugin.
The development of Firefox plugins is not as complex as it seems, and can be done using XML and JavaScript alone. Of course, this means that Firefox plug-in development using the technology is XML and JavaScript, to make a perfect plugin involves many aspects. But for our Hello world, we don't need that much.
1. Prepare the directory structure
First set up a directory on the hard disk, named extension. This name is taken at random. Then build the Chrome folder inside and build the content folder in Chrome. Note that the names of the two folders are fixed and cannot be changed arbitrarily. Then create a new two text file inside the extension, named Chrome.manifest and INSTALL.RDF. In this way, the following is established
Directory structure: extension
|--install.rdf
|--chrome.manifest
|--chrome |--content |--sample.xul
2. Writing INSTALL.RDF
Open the Install.rdf file with a text editor and enter the following:
XML code
<? 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">
<!--indicates the ID of the plugin. The ID should be a string in an email format, or a GUID. Note that the purpose of using email is to ensure that the ID is unique and does not require that the email address be valid. must be filled in. -
<em:id>[email protected]</em:id>
<!--indicates the version number of the plugin. must be filled in. -
<em:version>1.0</em:version>
<!--The value here must be 2. This tag describes the app's Firefox plugin, not the other XUL application. Firefox plugin code is 2, if it is the Firefox theme will be 4. must be filled in. -
<em:type>2</em:type>
<!--the target application for installing plug-ins and the highest and lowest versions. must be filled in. -
<em:targetapplication>
<Description>
<!--Firefox ID, this value cannot be changed. must be filled in. -
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<!--indicate the minimum version of Firefox that can use the plugin. This means 1.5. must be filled in. -
<em:minversion>1.5</em:minversion>
<!--indicate the maximum version of Firefox that can use the plugin. This means 3.0.x. In combination with minversion, this plugin is only available for versions between 1.5 and 3.0.x. must be filled in. -
<em:maxversion>3.0.*</em:maxversion>
</Description>
</em:targetapplication>
<!--plug-in metadata. -
<!--plugin name. must be filled in. -
<em:name>sample</em:name>
description of the <!--plugin. The description here will appear in Firefox's tools-add-ons description bar. Select Fill. -
<em:description>a Test extension</em:description>
<!--plugin author. Select Fill. -
<em:creator>galaxy.org</em:creator>
<!--The URL of the plugin home page. Select Fill. -
<em:homepageurl>http://www.example.com/</em:homepageurl>
</Description>
</rdf>
<?xml version= "1.0"?> <rdf xmlns= "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em= "Http://www.mozi lla.org/2004/em-rdf# "> <description about=" urn:mozilla:install-manifest "> <!--indicate the ID of the plugin. The ID should be a string in an email format, or a GUID. Note that the purpose of using email is to ensure that the ID is unique and does not require that the email address be valid. must be filled in. -<em:id>[email protected]</em:id> <!--indicates the version number of the plugin. must be filled in. -<em:version>1.0</em:version> <!--Here the value must be 2. This tag describes the app's Firefox plugin, not the other XUL application. Firefox plugin code is 2, if it is the Firefox theme will be 4. must be filled in. -<em:type>2</em:type> <!--the target application for installing plug-ins and the highest and lowest versions. must be filled in. -<em:targetApplication> <Description> <!--Firefox ID, this value cannot be changed. must be filled in. -<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--indicate the minimum version of Firefox that can use the plugin. This means 1.5. must be filled in. -<em:minVersion>1.5</em:minVersion> <!--indicate the fire that can use the pluginThe highest version of Fox. This means 3.0.x. In combination with minversion, this plugin is only available for versions between 1.5 and 3.0.x. must be filled in. -<em:maxVersion>3.0.*</em:maxVersion> </Description> </em:t Argetapplication> <!--plug-in meta data. -<!--plugin name. must be filled in. -<em:name>sample</em:name> < Description of the!--plugin. The description here will appear in Firefox's tools-add-ons description bar. Select Fill. --<em:description>a test extension</em:description> <!--plugin author. Select Fill. -<em:creator>galaxy.org</em:creator> <!--the URL of the plugin home page. Select Fill. -<em:homepageURL>http://www.example.com/</em:homepageURL> </Description> & Lt;/rdf>
The INSTALL.RDF file is intended for use by XUL applications with plug-in management capabilities that can be used by XUL applications to identify information about the plug-in being installed. The INSTALL.RDF file has the following format:
XML code
<? 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">
<!--Properties --
</Description>
</RDF>
<?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 "> <!-- Properties- </Description> </RDF>
There are many comments on the above INSTALL.RDF, and there is no need for that much comment in the actual application.
3. Writing XUL files
The Firefox interface is described using XUL and JavaScript. XUL, the XML user Interface Language, is a language developed by Mozilla that uses XML to describe the user interface. XUL is used only to define the user interface, and the functionality of its components is defined by JavaScript.
The entire Firefox interface is defined using XUL. You can find the Content/browser/browser.xul file in%firefox_install_dir%/chrome/browser.jar. (Note that the jar file can be decompressed with WinRAR or some other compression tool, a compressed package compressed using the ZIP algorithm) in this XUL file:
XML code
- <statusbar id="Status-bar">
- <!--... <statusbarpanel>s ...-
- </statusbar>
<statusbar id= "Status-bar" > <!--... <statusbarpanel>s ...--</statusbar>
Here's the <statusbar id= "Status-bar" > called "Coverage Point" (Overlay, I don't know what the official translation is, I translated it into this word, think it is accurate, but in order not to cause confusion, The following is still using the word overlay:-)) ". The so-called overlay is the way to attach other XUL files when running a XUL document. So Our original XUL is A.xul, which has a overlay defined as overlay-point, then we can add to this overlay in another b.xul, so that the A.XUL can be executed automatically when the B.xul content to the Overlay-point and Run it out. So there's some abstraction to see our code:
XML code
<? XML version="1.0"?>
<overlay id="Sample"
xmlns="Http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="Status-bar">
<statusbarpanel id="My-panel" label="Hello, World" />
</statusbar>
</Overlay>
<?xml version= "1.0"?> <overlay id= "sample" xmlns= "http://www.mozilla.org/keymaster/gatekeeper/ There.is.only.xul "> <statusbar id=" Status-bar "> <statusbarpanel id=" My-panel "label=" Hello, World " /> </statusbar> </overlay>
Just said, <statusbar id= "Status-bar" > is a overlay, then the XUL document in our plugin is based on this overlay to expand. Here, we define a statusbarpanel on the StatusBar, whose ID is My-panel,label is Hello, world. This code is relatively clear, is to append a statusbarpanel on the original StatusBar, this statusbarpanel shows Hello, world.
After we understand this code, we define the file as Sample.xul and save it under Chrome/content. You can see that this folder structure is consistent with the structure of Firefox itself.
After we have finished writing the Xul file, we define its chrome.manifest. XUL documents need to be requested through the CHROME://protocol. CHROME://is similar to the http://protocol, but is used to request XUL documents. Enter CHROME://BROWSER/CONTENT/BROWSER.XUL in the Firefox address bar to see what happens, and you'll know what the XUL document does.
This URL includes four parts: 1) chrome://-the protocol name, like http://, 2) browser/-the package name, the ID of the plugin's package, 3) content/-the type of the requested content; 4) browser.xul-the file name of the request. So, Chrome://foo/skin/bar.png is requesting a bar.png file in the skin underneath the Foo pack.
4. Writing Chrome.manifest
Add the following sentence to the chrome.manifest:
Content Sample chrome/content/
This indicates that the content of the request type, the package name is sample, and the location is relative to the chrome/content/of the Chrome.manifest file. Note that the last face here/is not missing!
Then you need to tell Firefox our extension overlay, and add another sentence inside the chrome.manifest:
Overlay Chrome://browser/content/browser.xul Chrome://sample/content/sample.xul
This is to tell Firefox that you need to expand the chrome://sample/content/sample.xul when the Chrome://browser/content/browser.xul is loaded.
5. Testing
So far, we have completed this Hello World plugin. Let's test it here.
Use the compression tool to compress the extension folder into a zip file, note that some tools will add this folder to the compressed package, which requires that the package should be unpacked after the extension two files and a folder, not the extension folder. Then change the suffix name to XPI. Then open Firefox (I tested the version is 3.0.10), drag the Xpi to the window, Firefox will prompt to install plug-ins, follow the general process of installation, restart Firefox sometimes when installing the plug-in will not find the installation script error, because the compression is not under the root of the INSTALL.RDF That layer is causing it.
When we restart Firefox, the bottom right corner appears hello, word words, our plugin has been installed successfully!
about how the Firefox browser supports ActiveX controls, a small hellow world