请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 9715|回复: 9

firefox扩展插件制作方法 [复制链接]

yaba 楼主

糖糖她ba

版主 手机认证 

帖子
1657
体力
4007
威望
55
居住地
北京市 昌平区
发表于 2007-10-11 21:27:12 |显示全部楼层
插件地址:http://bbs.blueidea.com/thread-2798570-1-1.html

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中的,他是安装信息描述。
  1.       <?xml version="1.0"?>
  2. <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  3.      xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  4.   <Description about="urn:mozilla:install-manifest">
  5.     <em:id>yabaxx@Msn.com</em:id>
  6.     <em:version>1.0</em:version>
  7.     <em:type>2</em:type>
  8.    
  9.     <!-- Target Application this extension can install into,
  10.          with minimum and maximum supported versions. -->
  11.     <em:targetApplication>
  12.       <Description>
  13.         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
  14.         <em:minVersion>1.5</em:minVersion>
  15.         <em:maxVersion>2.0.0.*</em:maxVersion>
  16.       </Description>
  17.     </em:targetApplication>
  18.    
  19.     <!-- Front End MetaData -->
  20.     <em:name>blueidea search</em:name>
  21.     <em:description>blueidea </em:description>
  22.     <em:creator>yaba</em:creator>
  23.     <em:homepageURL>http://bbs.blueidea.com/</em:homepageURL>
  24.         <em:iconURL>chrome://blueideasearch/content/logo.gif</em:iconURL>
  25.         <em:updateURL>http://www.yoursblog.cn/bibar_update.rdf</em:updateURL>
  26.   </Description>      
  27. </RDF>
复制代码


chrome.manifest文件列表描述内容
  1. content     blueideasearch    chrome/content/
  2. overlay  chrome://browser/content/browser.xul chrome://blueideasearch/content/overlay.xul
复制代码

[ 本帖最后由 yaba 于 2007-10-11 22:19 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
专业iOS&Android应用及游戏开发
西部数码顶级域名注册商39元抢注!
yaba 楼主

糖糖她ba

版主 手机认证 

帖子
1657
体力
4007
威望
55
居住地
北京市 昌平区
发表于 2007-10-11 21:34:10 |显示全部楼层
install.rdf中
  1.     <Description>
  2.         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
  3.         <em:minVersion>1.5</em:minVersion>
  4.         <em:maxVersion>2.0.0.*</em:maxVersion>
  5.       </Description>
复制代码


这个em:id是不能变的. 他指明了这个插件的使用对像为 firefox.

em:minVersion 为最低可以安装这个插件的版本 。maxVersion反之.

  1.     <em:name>blueidea search</em:name>
  2.     <em:description>blueidea </em:description>
  3.     <em:creator>yaba</em:creator>
  4.     <em:homepageURL>http://bbs.blueidea.com/</em:homepageURL>
  5.     <em:iconURL>chrome://blueideasearch/content/logo.gif</em:iconURL>
  6.     <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就可以了. 他的语法标记十分简单易懂。
   
  1.        <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);"/>
  2.    
复制代码

   
   这对FF上  对 "主页" 这个按钮的描述。

   
  1.      <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>
  2.      
复制代码


   这是对FF“地址栏”描述


大家看是不是特别像HTML.

我们开始写插件的UI吧 。。

     打开\chrome\content\overlay.xul 文件.
   
  1.      <?xml version="1.0"?>
  2.       <overlay id="bisearch" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  3.      <script src="chrome://blueideasearch/content/overlay.js" />
  4.    
复制代码


     <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">
    我们就这样写:  
   
  1.          <toolbox id="navigator-toolbox">
  2.         <toolbaritem id="bdSearchBoxbar">
  3.                 <toolbarbutton id="bisearch_button" tooltiptext="转到蓝色理想" image="chrome://blueideasearch/content/blueidea.png" oncommand="GotoWebSite('http://bbs.blueidea.com');"></toolbarbutton>
  4.                 </toolbaritem>
  5.           </toolbox>
  6.    
复制代码


     这个代码呢..是在<toolbox id="navigator-toolbox">下追加一个子节点 toolbarbutton 是一个按钮   oncommand是它的一个事件,当按下它时触发这个事件. 里边的响应的函数就在我们一开始引入的那个JS里.

  1.       /**
  2. * 在当前窗口中打开链接。
  3. */

  4. function GotoWebSite(url){
  5.        
  6.         loadURI(url)
  7.        
  8. }
  9.   
复制代码

[ 本帖最后由 yaba 于 2007-10-11 22:18 编辑 ]
已有 1 人评分威望 收起 理由
帅青蛙 + 2 原创内容

总评分: 威望 + 2   查看全部评分

专业iOS&Android应用及游戏开发
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

帖子
16
体力
82
威望
0
居住地
河北省 石家庄市
发表于 2007-10-12 09:06:51 |显示全部楼层
请问楼主.那IE插件又是怎么做的.和FF一样吗

使用道具 举报

yaba 楼主

糖糖她ba

版主 手机认证 

帖子
1657
体力
4007
威望
55
居住地
北京市 昌平区
发表于 2007-10-12 10:29:21 |显示全部楼层
原帖由 chenjing1121 于 2007-10-12 09:06 发表
请问楼主.那IE插件又是怎么做的.和FF一样吗


IE的就麻烦了.要写ActiveX了. 还是firefox的扩展性强啊,而且容易上手。只需要掌握XUL和JS就可以搞了~
专业iOS&Android应用及游戏开发

使用道具 举报

李惟

银牌会员 手机认证 

帖子
831
体力
2115
威望
0
发表于 2008-12-7 10:00:37 |显示全部楼层
提醒:最后回贴距现在 419 天,请不要无意义回复
原帖由 jiaxueq 于 2007-10-12 00:07 发表
收藏,有空研究一下。

使用道具 举报

sysdzw 
帖子
2
体力
29
威望
0
居住地
江苏省 南京市
发表于 2010-4-18 12:02:30 |显示全部楼层
你好,你对火狐扩展比较了解是吧?我想请教下你个问题,就是在扩展里如何访问当前打开的网页中的元素?我查阅了大量资料都没找到方法

使用道具 举报

sysdzw 
帖子
2
体力
29
威望
0
居住地
江苏省 南京市
发表于 2011-8-7 14:21:36 |显示全部楼层
警告

    faeng220: 请勿在技术区进行非技术回复,谢谢理解! 2010-4-18 13:06


提示:警告两次以上者,每次警告将会被禁言三天。  

我就不明白了,这叫非技术回复吗?难道每个回答的人都写一堆代码?我这是交流,我请教别人问题,别人技术性回答难道不行吗,或者别人还可以问我一个问题,我把我知道的技术性的东西拿出来交流探讨难道不可以?难道楼下每个人都得写个alert("blueidea");才算是技术性回答?

研究数年,我已经做出了广泛使用的火狐扩展了,全世界都在用。如果不是你的警告导致楼主不敢参数我的非技术讨论可能发布要更早!建议总管理员撤销上面是非不分的小管理员。

我写的火狐自动表单扩展:
https://addons.mozilla.org/zh-CN/firefox/addon/fillforms/

开发日志:
http://blog.csdn.net/sysdzw/article/details/5514062

使用道具 举报

帖子
426
体力
1040
威望
0
居住地
广东省 广州市
发表于 2011-8-8 12:39:04 |显示全部楼层
标记下,方便查找。

使用道具 举报

alphat 
帖子
814
体力
2154
威望
46
发表于 2011-8-8 12:46:04 |显示全部楼层

回复 17# sysdzw 的帖子

看了下整个贴子,版主faeng220,应该是手误了,你看下你楼上的那个就知道了。
关注前端,网站性能优化 我的博客 腾讯微博

使用道具 举报

ecma 

请叫我草履虫

银牌会员

帖子
919
体力
2286
威望
3
居住地
福建省 福州市
发表于 2011-8-8 14:15:01 |显示全部楼层

回复 17# sysdzw 的帖子

用 greasemonkey(firefox的一个扩展),很方便做一些web外挂和脚本化处理的东西
也支持转xpi方便安装

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 08:32 , Processed in 0.115724 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部