Firefox扩展插件制作方法

一直感觉做浏览器插件是一件非常神奇的事情,今天在blueidea上看了这篇文章后,感觉制作FF插件其实是挺简单的一件事情,先存下文章,以后或许会需要制作插件,备用。

插件下载:blueideasearch.xpi

首先第一步 说一下怎么样查看firefox插件的源码, 就我上边写的那个东西,把它下载下来.将它的扩展名改为zip并解压。会得到一个blueideaserach的文件夹, 这个文件夹中便是我做的这个插件的源码

这个目录中除了 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中的,他是安装信息描述。

CODE:
<?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文件列表描述内容

CODE:
content      blueideasearch     chrome/content/
overlay   chrome://browser/content/browser.xul chrome://blueideasearch/content/overlay.xul

install.rdf中

CODE:
<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反之.

CODE:
<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 框架开发的。

大家可以在FF的地址栏输入以下地址 chrome://browser/content/browser.xul   来看一下 FF的本身自己的UI的描述

在这里推荐大家用fireBug 来查看.. 可以清楚看到浏览器的DOM结构. 我们以后的操作都要针对这个DOM结构.

大家看到我们说要对插件UI描述的文件扩展名为.xul   对这xul语言 大家可以参考http://www.xulplanet.com/   这个网站..它里有XUL详细介绍。把它理解成一种HTML就可以了. 他的语法标记十分简单易懂。

CODE:
<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上   对 “主页” 这个按钮的描述。

CODE:
<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;” 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吧 。。

打开chromecontentoverlay.xul 文件.

CODE:
<?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”>
我们就这样写:

CODE:
<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里.

CODE:

/**
* 在当前窗口中打开链接。
*/

function GotoWebSite(url){

loadURI(url)

}

发表评论

电子邮件地址不会被公开。 必填项已用*标注