了解了上边的内容,就可以进行插件的编写了. firefox它本身是基于Mozilla 框架开发的。
大家可以在FF的地址栏输入以下地址 chrome://browser/content/browser.xul 来看一下 FF的本身自己的UI的描述
在这里推荐大家用fireBug 来查看.. 可以清楚看到浏览器的DOM结构. 我们以后的操作都要针对这个DOM结构.
大家看到我们说要对插件UI描述的文件扩展名为.xul 对这xul语言 大家可以参考http://www.xulplanet.com/ 这个网站..它里有XUL详细介绍。把它理解成一种HTML就可以了. 他的语法标记十分简单易懂。
<toolbarbutton id="home-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="主页" ondragover="nsDragAndDrop.dragOver(event, homeButtonObserver);" ondragdrop="nsDragAndDrop.drop(event, homeButtonObserver);" ondragexit="nsDragAndDrop.dragExit(event, homeButtonObserver);" onclick="BrowserHomeClick(event);"/>
这对FF上 对 "主页" 这个按钮的描述。
<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="拖放此图标以创建到此页面的链接"/><image id="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><hbox id="urlbar-icons"><button type="menu" style="-moz-user-focus: none;" class="plain" id="feed-button" chromedir="ltr" onclick="return FeedHandler.onFeedButtonClick(event);"><menupopup position="after_end" onpopupshowing="return FeedHandler.buildFeedList(this);" oncommand="return FeedHandler.subscribeToFeed(null, event);" onclick="checkForMiddleClick(this, event);"/></button><image tooltiptext="显示此窗口的安全性信息" id="lock-icon" onclick="if (event.button == 0) displaySecurityInfo(); event.stopPropagation();"/><image id="safebrowsing-urlbar-icon" tooltiptext="此页面可能具有危险性;点击查看详细信息。" level="safe" onclick="goDoCommand('safebrowsing-show-warning')"/></hbox></textbox>
这是对FF“地址栏”描述
大家看是不是特别像HTML.
我们开始写插件的UI吧 。。
打开\chrome\content\overlay.xul 文件.
<?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"> 就理解成.在写HTML时加入的那一句声明吧。 <script src="chrome://blueideasearch/content/overlay.js" /> 这是程序的处理部份. 就像在写HTML是引入JS一样.
哧哧,是不是越来越像在写网页了.
我们要确定插件要出现的位置. 比如我们的插件要出现在地址栏下边. 我们可以用FireBug来查看刚才我给的那个chrome的地址. 找到地址栏,并查看它的父结点. 这里我查到地址栏的父结点为<toolbox id="navigator-toolbox"> 我们就这样写:
<toolbox id="navigator-toolbox"> <toolbaritem id="bdSearchBoxbar"> <toolbarbutton id="bisearch_button" tooltiptext="转到蓝色理想" image="chrome://blueideasearch/content/blueidea.png" oncommand="GotoWebSite('http://bbs.blueidea.com');"></toolbarbutton> </toolbaritem> </toolbox>
这个代码呢..是在<toolbox id="navigator-toolbox">下追加一个子节点 toolbarbutton 是一个按钮 oncommand是它的一个事件,当按下它时触发这个事件. 里边的响应的函数就在我们一开始引入的那个JS里.
/** * 在当前窗口中打开链接。 */
function GotoWebSite(url){ loadURI(url) }
经典论坛讨论: http://bbs.blueidea.com/thread-2798710-1-1.html
本文链接:http://www.blueidea.com/tech/web/2007/4979.asp
出处:蓝色理想
责任编辑:moby
上一页 firefox扩展插件制作方法 [1] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|