欢迎登陆真网站,您的到来是我们的荣幸。 登陆 注册 忘记密码? ☆设为首页 △加入收藏
欢迎加入真幸福QQ群
电脑知识: 基础知识 网络技术 操作系统 办公软件 电脑维修 电脑安全 windows7 windows8 windows10 服务器教程 平板电脑 视频播放教程 网络应用 互联网 工具软件 浏览器教程 QQ技巧 输入法教程 影视制作 YY教程 wps教程 word教程 Excel教程 PowerPoint
云南西双版纳特产小花糯玉米真空包装


win7系统任务管理器alg.exe是什么进程?
新浪微博如何换行?
Win7如何设置自动更换桌面壁纸
360安全服务举报处理时间?
怎么解决360极速浏览器CPU利用率高电脑卡慢
新浪微博换行怎么不行?
百度浏览器无痕浏览怎么设置
win8系统添加新用户的设置方法
uc浏览器下载的文件在哪里?
win7系统中玩梦幻西游总是一卡一卡的解决方法
火狐浏览器插件开发入门教程
【 来源:网络 】【 点击:3 】 【 发布时间:2017_03_03 08:59:59 】

   许多网友都想学习火狐浏览器插件开发这一方面的知识,不过,目前,许多资料都是比较晦涩难懂,不太适合初学者。那么,初学者想要学习火狐浏览器插件开发该怎么入门呢?还是一起来看看今天的火狐浏览器插件开发入门教程!

火狐浏览器

  火狐浏览器

  首先需要知道什么是“Firefox插件”。这里说的“插件”只是一个通俗的说法,其实Firefox这种扩展功能的“插件”包括:扩展extension和插件plugin。

  Firefox官方网站的解释是:Extensions are small add-ons that add new functionality to your Mozilla program. Plugins are programs that allow websites to provide content to you and have it appear in your browser.(扩展是能够给Mozilla增加一些新功能的附加软件,插件是允许网站向你提供内容并在浏览器中显示的程序)。通俗的讲,“扩展”是基于Firefox本身增加的一些实用功能,而“插件”则是在Firefox之外独立编写的程序,用于显示网页中的特定内容如Flash、视频和Java 等。

  其实,我们需要开发的是Extension。

  要开发Extension,可以分几步走:

  1.了解什么是Extension,一般现成的Extension怎样组成的?里边包含的每个文件具体的作用是什么?

  2.了解Firefox处理运行Extension的机制。例如Xpcom,chrome机制等。

  3.看看入门例子,用记事本,做一个最简单的扩展,运行一下。另外,使用Firefox,下载一些常用的扩展,并查看一下人家的源代码。

  4.正式搭建开发环境。

  5.一边学习人家的代码,一边修改代码实现自己的扩展。

  第一步和第二步:

  需要了解:chrome,rdf,manifest,xul,xpcom等概念。

  扩展(extensions)

  Extensions添加新功能到Mozilla Firefox中。Extensions可以简单添加一个工具栏按钮,也可以实现一个完整的新功能。Extensions可以让firefox更加适合个人需要。

  Extensions跟plugins(插件)不同。插件帮助浏览器显示特殊内容,例如播放多媒体文件。常见的插件是flash player。而Extensions也跟搜索引擎插件不同,搜索引擎插件只是在搜索栏里边多加入一个搜索引擎地址而已。

  一个扩展,通常是一个XPI(Cross-Platform Installer Module)包,其实是一个zip类型的压缩包,里边包括必须的文件。在下边的图1中,显示了一个标准的扩展包括的文件和文件的目录结构。

firefox扩展目录结构

  firefox扩展目录结构

  在上图中,content 目录下面存放的是扩展的描述界面的 XUL 文件和增加行为的 JavaScript 文件。locale 目录存放的是本地化相关的文件。如果需要支持英文和中文,就可以在 locale 目录下面新建 en-US 和 zh-CN 目录来存放相应的本地化字符串。skin 目录存放的是一些 CSS 文件,用来定义扩展的外观。chrome.manifest 是 Chrome 注册的清单文件(参见 2.2节)。install.rdf 分别包含了扩展安装的信息。

  chrome

  Chrome 指的是应用程序窗口的内容区域之外的用户界面元素的集合,这些用户界面元素包括工具条,菜单,进度条和窗口的标题栏等。Chrome 提供者能为特定的窗口类型(如浏览器窗口)提供 chrome。有三种基本的 chrome 提供者:

  l 内容(Content):通常是 XUL(XML User Interface Language) 文件。 而XUL文件将会指定扩展在Firefox中运行时表现的界面和功能。XUL文件是一种Javascript文件,设计的目的是为了描述窗口和对话框的内容。

  l 区域(Locale) :存放本地化信息。

  l 皮肤(Skin):描述 chrome 的外观。通常包含 CSS 和图像文件。

  XULRunner

  XULRunner 项目提供一套称为XULRunner的Mozilla运行支持包,用于启动基于XUL+XPCOM(见2.4节)的程序,例如Firefox,Thunderbird,Sunbird。它提供各种机制,包括安装,升级,卸除这些软件的功能。

  而Firefox整个程序主界面和扩展的界面都是由XUL文件来描述的,所以在Firefox运行过程中,和扩展使用过程中,都是靠XULRunner来支持。

  XPCOM

  XPCOM(Cross Platform Component Object Model)是一种跨平台组件对象模型,类似于微软的 COM。它有多种语言系结(Language Binding),使 XPCOM 组件可使用并实现于C++、JavaScript、Java 及 Python。XPCOM 的界面是由称为 XPIDL (Interface Definition Language)所定义。

  XPCOM 自身提供了一套核心组件和类别,例如,档案和内存管理、线程、基本数据结构(strings, arrays, variants)等。大多数 XPCOM 组件并非由核心组件所提供,而是由其他平台或应用程序、甚至是延伸套件所提供。

  而在Firefox中,绝大多数的功能都基于XPCOM机制。例如Firefox为扩展开发提供的接口都是用XPCOM方式来实现的。

  例如gRDF = Components.classes[“@mozilla.org/rdf/rdf-service;1”]

  .getService(Components.interfaces.nsIRDFService);

  将获取RDF模块的nsIRDFService实例。

  XPInstall

  XPInstall(Cross-Platform Install)是Mozilla系列软件或者其他基于XUL的软件中用于安装extensions的技术。在Firefox2.0的源代码中,有一个名为xpinstall的文件夹,存放跟XPInstall模块相关的代码。

  另外需要特别指出Firefox的扩展分为普通默认扩展和定制安装扩展。普通默认扩展没有定制的安装代码,整个安装过程由Firefox默认流程来执行。而定制安装扩展的安装包中有定制的安装过程信息。而这些信息是用专门的Javascript代码编写,调用XPInstall提供的API来实现。定制安装扩展,常见的例子是用Firefox打开扩展中心,点击某个扩展就可以在线安装,其中就是调用了XPInstall的API。

  简单了解Firefox Extension组成说明和Firefox处理Extension的过程分析。

  第三步:

  根据这个简单教程,尝试一下hello world:

  另外就是在Firefox官方扩展网站下载一些扩展来研究一下了。

  安装后,Extension的代码会在磁盘这个位置:

  C:Documents and SettingsUserNameApplication DataMozillaFirefoxProfilesProfileextensions

  第四步:

  正式开始使用开发环境。

  1.Firefox安装相关的扩展:firebug,1.Firefox 3.0,这个肯定必不可少了。在此推荐3.0,因为最新版3.6或者3.7,那些扩展还没有更新跟进,所以要想安装更多的扩展,还是以3.0为好。

  2.Firebug,这个不必多说。虽然我只是菜鸟,只是用这个来定位某些xul元素对应什么代码,但帮助不少。再到firebug的官网,下载chromebug:(有了chromebug才能更好的调试自己写的chrome文件)

  因为调试js需要开开关关firefox,太麻烦,所以一些代码可以在firebug控制台先测试。在firefox7试验过

  3.Extension Developer。官网推荐,当然安装啦。这个是一套Firefox扩展,包括打包xpi功能,预览xul等。

  4.Spket IDE。开发扩展的IDE,官网推荐的,比较好用。不过好像不能打包xpi,也不能测试。不过只作为编辑器也不错了。用它来看人家的扩展的代码,非常舒服……

  5.xul explorer。预览xul效果。

  6.emEditor。快速打开代码文件,进行修改。另外最重要的功能是:查找。研究人家的代码的时候,JavaScript的代码转来转去,太难找到某些变量或者对象的定义了。用emEditor的“在文件中查找”功能,作用非常大,查找出来的结果有预览……(后来发现,也可以直接用Spket IDE的search--file功能,跟eclipse的查找功能类似,不过缺点就是没有预览,每次要双击了才知道是怎么匹配的。)

  7.另外,习惯使用eclipse + spket + XULBooster + Firefox

  第五步:

  慢慢学习Javascript,CSS还有一些细节的技术。尝试修改人家已有的Extension,加入自己想要的功能。

本网站由川南居提供技术支持,fkzxf版权所有 浙ICP备12031891号
淳安分站 淳安分站