firefox扩展插件制作方法

插件地址：http://www.yoursblog.cn/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中的,他是安装信息描述。

代码:

<?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>[e-mail]</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>9.9</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   查找更新地址 （如果安装时提示：“将不会被安装,因为它未提供安全更新”，那么将其删除后保存就解决了。这里补充一下firefox3无法安装插件：未提供安全更新的解决办法。

 

在地址栏输入about:config

右键单击新建布尔值，名称为"extensions.checkUpdateSecurity"，值为false

ok

还有会兼容性问题，现在(2008.08)大多数插件都是ff2时代的，所以在ff3上安装时都会因为检测到版本不兼容而拒绝安装，这时同样新建布尔值，名称为"extensions.checkCompatibility"，值为false

但有些不兼容插件可能导致firefox无法运行，这时就只能把firefox程序文件夹下的extensions目录清空，以前的插件也没咯～TT   吓你的，只要把extensions目录里的东西剪切到其他地方，然后一个一个往里加，并启动firefox，直到出现问题，说明刚刚加的是问题插件，删之，麻烦了点，但是可行。

）

了解了上边的内容,就可以进行插件的编写了.  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) 
}