firefox擴展插件制作方法詳細介紹
更新時間:2007年10月14日 14:31:10 作者:
首先第一步 說一下怎么樣查看firefox插件的源碼, 就我上邊寫的那個東西,把它下載下來.將它的擴展名改為zip并解壓。會得到一個blueideaserach的文件夾, 這個文件夾中便是我做的這個插件的源碼[attach]62937[/attach]
這個目錄中除了 chrome目錄 chrome.manifest install.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中的,他是安裝信息描述。
<?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文件列表描述內容
content blueideasearch chrome/content/
overlay chrome://browser/content/browser.xul chrome://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>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 是插件的名稱。
em:description 描述
em:creator 作者
em:homepageURL 主頁
em:iconURL 圖標地址
em:updateURL 查找更新地址
了解了上邊的內容,就可以進行插件的編寫了. firefox它本身是基于Mozilla 框架開發(fā)的。
大家可以在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="拖放此圖標以創(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="拖放此圖標以創(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="此頁面可能具有危險性;點擊查看詳細信息。" 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一樣.
哧哧,是不是越來越像在寫網頁了.
我們要確定插件要出現(xiàn)的位置. 比如我們的插件要出現(xiàn)在地址欄下邊. 我們可以用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">下追加一個子節(jié)點 toolbarbutton 是一個按鈕 oncommand是它的一個事件,當按下它時觸發(fā)這個事件. 里邊的響應的函數(shù)就在我們一開始引入的那個JS里.
/**
* 在當前窗口中打開鏈接。
*/
function GotoWebSite(url){
loadURI(url)
}
這個目錄中除了 chrome目錄 chrome.manifest install.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中的,他是安裝信息描述。
復制代碼 代碼如下:
<?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文件列表描述內容
復制代碼 代碼如下:
content blueideasearch chrome/content/
overlay chrome://browser/content/browser.xul chrome://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>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 是插件的名稱。
em:description 描述
em:creator 作者
em:homepageURL 主頁
em:iconURL 圖標地址
em:updateURL 查找更新地址
了解了上邊的內容,就可以進行插件的編寫了. firefox它本身是基于Mozilla 框架開發(fā)的。
大家可以在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="拖放此圖標以創(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="拖放此圖標以創(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="此頁面可能具有危險性;點擊查看詳細信息。" 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一樣.
哧哧,是不是越來越像在寫網頁了.
我們要確定插件要出現(xiàn)的位置. 比如我們的插件要出現(xiàn)在地址欄下邊. 我們可以用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">下追加一個子節(jié)點 toolbarbutton 是一個按鈕 oncommand是它的一個事件,當按下它時觸發(fā)這個事件. 里邊的響應的函數(shù)就在我們一開始引入的那個JS里.
復制代碼 代碼如下:
/**
* 在當前窗口中打開鏈接。
*/
function GotoWebSite(url){
loadURI(url)
}
相關文章
xp與2000,2003系統(tǒng)優(yōu)化和設置教程
xp與2000,2003系統(tǒng)優(yōu)化和設置教程...2007-03-03ghost.pif新變種導致殺毒軟件0xc00000ba失敗的解決方法
ghost.pif新變種導致殺毒軟件0xc00000ba失敗的解決方法...2007-07-07由于mysql運行權限導致無法找到 Discuz! 論壇數(shù)據(jù)表! 的解決方法
由于mysql運行權限導致無法找到 Discuz! 論壇數(shù)據(jù)表! 的解決方法...2007-11-11