First the first step to say how to view the source of the Firefox plug-in, on the top of what I wrote, download it. Change its extension to zip and unzip it. Will get a Blueideaserach folder, this folder is what I do the source code of this plugin [Attach]62937[/attach]
This directory is not required except for the Chrome directory Chrome.manifest INSTALL.RDF three.
Chrome.manifest This file is a list of all the files.
INSTALL.RDF This is a description of the installation information.
The main program is in the Chrome directory.
This whole directory structure is like this.
Blueideasearch-----
--------Chrome
-----Content
--overlay.xul
--overlay.js
--------Chrome.manifest
---------INSTALL.RDF
That is to say, just press the directory structure to build. and compressed into a ZIP package renamed to XPI it can be installed in Firefox.
The Overlay.xul file is a human UI description of the plug-in.
Overlay.js is the processing part of the program.
The code below is INSTALL.RDF, he is the installation information description.
Copy Code code as follows:
<?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" >
<em:id>yabaxx@Msn.com</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>
<!--Target Application This extension can install into,
With minimum and maximum supported versions. -->
<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>
<!--Front End MetaData-->
<em:name>blueidea search</em:name>
<em:description>blueidea </em:description>
<em:creator>yaba</em:creator>
<em:homepageURL>http://bbs.blueidea.com/</em:homepageURL>
<em:iconURL>chrome://blueideasearch/content/logo.gif</em:iconURL>
<em:updateURL>http://www.yoursblog.cn/bibar_update.rdf</em:updateURL>
</Description>
</RDF>
Chrome.manifest File List Description content
Copy Code code as follows:
Content Blueideasearch chrome/content/
Overlay Chrome://browser/content/browser.xul Chrome://blueideasearch/content/overlay.xul
In INSTALL.RDF
Copy Code code as follows:
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
This em:id is not to be changed. He pointed out the use of this plugin as Firefox.
Em:minversion is the lowest version that can be installed on this plugin. MaxVersion vice versa.
Copy Code code as follows:
<em:name>blueidea search</em:name>
<em:description>blueidea </em:description>
<em:creator>yaba</em:creator>
<em:homepageURL>http://bbs.blueidea.com/</em:homepageURL>
<em:iconURL>chrome://blueideasearch/content/logo.gif</em:iconURL>
<em:updateURL>http://www.yoursblog.cn/bibar_update.rdf</em:updateURL>
Em:name is the name of the plug-in.
Em:description description
Em:creator author
Em:homepageurl Home
Em:iconurl icon Address
Em:updateurl Lookup Update Address
Understand the above content, you can do the writing of Plug-ins. Firefox itself is developed based on the Mozilla framework.
You can enter the following address in the FF address bar Chrome://browser/content/browser.xul Look at the description of FF's own UI
Here we recommend that you use Firebug to view. You can see the DOM structure of the browser clearly. We'll do this for the DOM structure later.
You see, we said that the file name extension to the plug-in UI description is. XUL to this XUL language you can refer to http://www.xulplanet.com/this website. It has a detailed description of XUL. Understand it as an HTML. His grammatical mark is very easy to understand.
Copy Code code as follows:
<toolbarbutton id= "Home-button" class= toolbarbutton-1 chromeclass-toolbar-additional "label=" Home "ondragover=" Nsdraganddrop.dragover (event, Homebuttonobserver); "Ondragdrop=" Nsdraganddrop.drop (event, Homebuttonobserver); ondragexit= "Nsdraganddrop.dragexit (event, Homebuttonobserver);" onclick= "Browserhomeclick (event);" />
This is a description of the button on "Home page" on ff.
Copy Code code as follows:
<textbox sizetopopup= "pref" id= "Urlbar" flex= "1" chromedir= "ltr " type=" AutoComplete " autocompletesearch=" History " autocompletepopup=" Popupautocomplete " Completeselectedindex= "true" tabscrolling= "true" showcommentcolumn= "true" enablehistory= "true" oninput= "Gbrowser.usertypedvalue = this.value" ontextentered= "return Handleurlbarcommand (param); " ontextreverted= "Return handleurlbarrevert ();" ><deck id= "Page-proxy-deck" onclick= "Pageproxyclickhandler (event);" ><image id= "Page-proxy-button" ondraggesture= "Pageproxydraggesture (event);" tooltiptext= "Drag and drop this icon to create a link to this page"/><image id= "Page-proxy-favicon" validate= "Never" Ondraggesture= "Pageproxydraggesture (event);" onload= "this.parentnode.selectedindex = 1; &nbSp; event.stoppropagation () ;" onerror= "Gbrowser.addtomissediconcache (THIS.SRC); this.removeattribute (' src '); this.parentNode.selectedIndex = 0; " tooltiptext= "Drag and drop this icon to create a link to this page"/></deck>Everybody see is not particularly like HTML. Let's start by writing the plugin UI.
Open the \chrome\content\overlay.xul file.
Copy Code code as follows:
<?xml version= "1.0"?>
<overlay id= "Bisearch" xmlns= "Http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
<script src= "Chrome://blueideasearch/content/overlay.js"/>
<overlay id= "Bisearch" xmlns= "Http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > It is understood that the statement that you added when you wrote HTML.
<script src= "Chrome://blueideasearch/content/overlay.js"/> This is the processing part of the procedure. It's like writing HTML to introduce JS.
It's more and more like writing a webpage.
We want to determine where the plug-in will appear. For example, our plugin should appear below the address bar. We can use Firebug to view the chrome address I gave you just now. Locate the Address bar and view its parent node.
Here I find the parent node of the address bar is <toolbox id= "Navigator-toolbox" >
That's how we write:
Copy Code code as follows:
<toolbox id= "Navigator-toolbox" >
<toolbaritem id= "Bdsearchboxbar" >
<toolbarbutton id= "Bisearch_button" tooltiptext= "Go to Blue Ideal" image= "chrome://blueideasearch/content/blueidea.png" Oncommand= "Gotowebsite (' http://bbs.blueidea.com ');" ></toolbarbutton>
</toolbaritem>
</toolbox>
What about this code ... is to append a child node under <toolbox id= "Navigator-toolbox" > ToolBarButton is a button OnCommand is an event that triggers this event when it is pressed. The function of the response inside is the JS that we introduced in the beginning.
Copy Code code as follows:
/**
* Opens the link in the current window.
*/
function Gotowebsite (URL) {
Loaduri (URL)
}
