|
了解了上邊的內(nèi)容,就可以進(jìn)行插件的編寫了. firefox它本身是基于Mozilla 框架開發(fā)的。
大家可以在FF的地址欄輸入以下地址 chrome://browser/content/browser.xul 來看一下 FF的本身自己的UI的描述
在這里推薦大家用fireBug 來查看.. 可以清楚看到瀏覽器的DOM結(jié)構(gòu). 我們以后的操作都要針對這個(gè)DOM結(jié)構(gòu).
大家看到我們說要對插件UI描述的文件擴(kuò)展名為.xul 對這xul語言 大家可以參考http://www.xulplanet.com/ 這個(gè)網(wǎng)站..它里有XUL詳細(xì)介紹。把它理解成一種HTML就可以了. 他的語法標(biāo)記十分簡單易懂。
<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上 對 "主頁" 這個(gè)按鈕的描述。
<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="拖放此圖標(biāo)以創(chuàng)建到此頁面的鏈接"/><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="拖放此圖標(biāo)以創(chuàng)建到此頁面的鏈接"/></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="此頁面可能具有危險(xiǎn)性；點(diǎn)擊查看詳細(xì)信息。" 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時(shí)加入的那一句聲明吧。
<script src="chrome://blueideasearch/content/overlay.js" /> 這是程序的處理部份. 就像在寫HTML是引入JS一樣.
哧哧,是不是越來越像在寫網(wǎng)頁了.
我們要確定插件要出現(xiàn)的位置. 比如我們的插件要出現(xiàn)在地址欄下邊. 我們可以用FireBug來查看剛才我給的那個(gè)chrome的地址. 找到地址欄,并查看它的父結(jié)點(diǎn).
這里我查到地址欄的父結(jié)點(diǎn)為<toolbox id="navigator-toolbox">
我們就這樣寫:
<toolbox id="navigator-toolbox">
<toolbaritem id="bdSearchBoxbar">
<toolbarbutton id="bisearch_button" tooltiptext="轉(zhuǎn)到藍(lán)色理想" image="chrome://blueideasearch/content/blueidea.png" oncommand="GotoWebSite('http://bbs.blueidea.com');"></toolbarbutton>
</toolbaritem>
</toolbox>
這個(gè)代碼呢..是在<toolbox id="navigator-toolbox">下追加一個(gè)子節(jié)點(diǎn) toolbarbutton 是一個(gè)按鈕 oncommand是它的一個(gè)事件,當(dāng)按下它時(shí)觸發(fā)這個(gè)事件. 里邊的響應(yīng)的函數(shù)就在我們一開始引入的那個(gè)JS里.
/**
* 在當(dāng)前窗口中打開鏈接。
*/
function GotoWebSite(url){
loadURI(url)
}
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2798710-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2007/4979.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 firefox擴(kuò)展插件制作方法 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 firefox擴(kuò)展插件制作方法 [2]
