首先第一步说一下怎么样查看firefox插件的源码,就我上边写的那个东西,把它下载下来.将它的扩展名改为zip并解压。会得到一个blueideaserach的文件夹,这个文件夹中便是我做的这个插件的源码[attach]62937[/attach]
这个目录中除了chrome目录chrome.manifestinstall.rdf这三个以外都不是必须的。
chrome.manifest这个文件中是对所有文件的一个列表.
install.rdf这个是安装信息的描述.
chrome目录中放的是主程序.
这个整个目录结构是这样的.
blueideasearch-----
--------chrome
-----content
--overlay.xul
--overlay.js
--------chrome.manifest
---------install.rdf
也就是说只要按这个目录结构建好.并压缩成zip包改名为xpi它便可以在firefox中安装了.
overlay.xul文件中是对插件的人UI描述。
overlay.js是程序的处理部分.
下边这个代码是install.rdf中的,他是安装信息描述。
复制代码 代码如下:
<?xmlversion="1.0"?>
<RDFxmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Descriptionabout="urn:mozilla:install-manifest">
<em:id>yabaxx@Msn.com</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>
<>
<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>blueideasearch</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文件列表描述内容
复制代码 代码如下:
contentblueideasearchchrome/content/
overlaychrome://browser/content/browser.xulchrome://blueideasearch/content/overlay.xul
install.rdf中
复制代码 代码如下:
<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:id是不能变的.他指明了这个插件的使用对像为firefox.
em:minVersion为最低可以安装这个插件的版本。maxVersion反之.
复制代码 代码如下:
<em:name>blueideasearch</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是插件的名称。
em:description描述
em:creator作者
em:homepageURL主页
em:iconURL图标地址
em:updateURL查找更新地址
了解了上边的内容,就可以进行插件的编写了.firefox它本身是基于Mozilla框架开发的。
大家可以在FF的地址栏输入以下地址chrome://browser/content/browser.xul来看一下FF的本身自己的UI的描述
在这里推荐大家用fireBug来查看..可以清楚看到浏览器的DOM结构.我们以后的操作都要针对这个DOM结构.
大家看到我们说要对插件UI描述的文件扩展名为.xul对这xul语言大家可以参考http://www.xulplanet.com/这个网站..它里有XUL详细介绍。把它理解成一种HTML就可以了.他的语法标记十分简单易懂。
复制代码 代码如下:
<toolbarbuttonid="home-button"class="toolbarbutton-1chromeclass-toolbar-additional"label="主页"ondragover="nsDragAndDrop.dragOver(event,homeButtonObserver);"ondragdrop="nsDragAndDrop.drop(event,homeButtonObserver);"ondragexit="nsDragAndDrop.dragExit(event,homeButtonObserver);"onclick="BrowserHomeClick(event);"/>
这对FF上对"主页"这个按钮的描述。
复制代码 代码如下:
<textboxsizetopopup="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="returnhandleURLBarCommand(param);"ontextreverted="returnhandleURLBarRevert();"><deckid="page-proxy-deck"onclick="PageProxyClickHandler(event);"><imageid="page-proxy-button"ondraggesture="PageProxyDragGesture(event);"tooltiptext="拖放此图标以创建到此页面的链接"/><imageid="page-proxy-favicon"validate="never"ondraggesture="PageProxyDragGesture(event);"onload="this.parentNode.selectedIndex=1;event.stopPropagation();"onerror="gBrowser.addToMissedIconCache(this.src);this.removeAttribute('src');this.parentNode.selectedIndex=0;"tooltiptext="拖放此图标以创建到此页面的链接"/></deck><hboxid="urlbar-icons"><buttontype="menu"class="plain"id="feed-button"chromedir="ltr"onclick="returnFeedHandler.onFeedButtonClick(event);"><menupopupposition="after_end"onpopupshowing="returnFeedHandler.buildFeedList(this);"oncommand="returnFeedHandler.subscribeToFeed(null,event);"onclick="checkForMiddleClick(this,event);"/></button><imagetooltiptext="显示此窗口的安全性信息"id="lock-icon"onclick="if(event.button==0)displaySecurityInfo();event.stopPropagation();"/><imageid="safebrowsing-urlbar-icon"tooltiptext="此页面可能具有危险性；点击查看详细信息。"level="safe"onclick="goDoCommand('safebrowsing-show-warning')"/></hbox></textbox>
这是对FF“地址栏”描述
大家看是不是特别像HTML. 我们开始写插件的UI吧。。
打开chromecontentoverlay.xul文件.
复制代码 代码如下:
<?xmlversion="1.0"?>
<overlayid="bisearch"xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<scriptsrc="chrome://blueideasearch/content/overlay.js"/>
<overlayid="bisearch"xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">就理解成.在写HTML时加入的那一句声明吧.
<scriptsrc="chrome://blueideasearch/content/overlay.js"/>这是程序的处理部份.就像在写HTML是引入JS一样.
哧哧,是不是越来越像在写网页了.
我们要确定插件要出现的位置.比如我们的插件要出现在地址栏下边.我们可以用FireBug来查看刚才我给的那个chrome的地址.找到地址栏,并查看它的父结点.
这里我查到地址栏的父结点为<toolboxid="navigator-toolbox">
我们就这样写:
复制代码 代码如下:
<toolboxid="navigator-toolbox">
<toolbaritemid="bdSearchBoxbar">
<toolbarbuttonid="bisearch_button"tooltiptext="转到蓝色理想"image="chrome://blueideasearch/content/blueidea.png"oncommand="GotoWebSite('http://bbs.blueidea.com');"></toolbarbutton>
</toolbaritem>
</toolbox>
这个代码呢..是在<toolboxid="navigator-toolbox">下追加一个子节点toolbarbutton是一个按钮oncommand是它的一个事件,当按下它时触发这个事件.里边的响应的函数就在我们一开始引入的那个JS里.
复制代码 代码如下:
/**
*在当前窗口中打开链接。
*/
functionGotoWebSite(url){
loadURI(url)
}