火狐浏览器插件开发入门教程

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


  火狐浏览器

  首先需要知道什么是“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扩展目录结构

  在上图中,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,加入自己想要的功能。

时间: 2024-08-31 08:36:39

火狐浏览器插件开发入门教程的相关文章

火狐浏览器新手设置教程

对于一直使用IE浏览器的朋友来说,火狐浏览器对菜鸟来说更是陌生的,因此本博客特制作了这篇火狐浏览器新手设置教程. 火狐浏览器软件上方一共有七个菜单项,分别是:文件,编辑,查看,历史,书签,工具,帮助. 下面主要讲解一下"工具"中的"选项"菜单,在这里你可以对火狐浏览器进行详细的设置,它相当于IE浏览中的"internet 选项"设置. 一:主要 1.启动 启动项显示:这里是设置当火狐浏览器启动时显示的页面,一共有三个选项分别是:显示空白页,显示我

Chrome插件开发入门教程

       最近在用百词斩这个网站来学单词,感觉很不错,就是在回顾单词列表的时候只有单词和意思,却没有读音.感觉很不方便,思来思去,想到了Chrome插件可以胜任这个工作,于是小小的研究了一下.        Chrome插件的本质就是一个由 manifest.json 文件和插件所需要的图片,css,html,js资源组成的一个web页面,只是和传统的web页面不同的,它是以chrome浏览器为宿主运行的一个web程序.        Chrome插件可以与Web页面交互,也可以通过cont

火狐浏览器怎么设置主页?

火狐浏览器怎么设置主页?小编带来了火狐浏览器主页设置教程,很多朋友想要为火狐浏览器设置自己喜欢的主页,但是却不知道怎么操作,请参考下文步骤吧. 第一步.打开火狐浏览器后可以看到左上角的Firefox,点击"Firefox"就会看到"选项"两个字,点击"选项"后,同时也会看到右边又出现"选项"两个字. 第三步.点击最右边的"选项",弹出一个窗口,在常规选项卡内,把启动Firefox时,设置为启动主页,主页网址

XML入门教程:XML 浏览器支持

xml|教程|浏览器|入门教程 几乎所有的主流浏览器均支持XML和XSLT. Mozilla Firefox 从1.0.2版本开始,Firefox就已开始支持XML和XSLT(包括CSS). Mozilla Mozilla含有用于XML解析的Expat,并支持显示XML + CSS.Mozilla同时拥有对Namespaces的某些支持. Mozilla同样可做到对XSLT的执行(XSLT implementation). Netscape 自从版本8开始,Netscape开始使用Mozilla

【教程转载】 火狐浏览器 实用插件一览(附插件下载地址)

[教程转载] 火狐浏览器 实用插件一览(附插件下载地址)简单介绍一下:火狐浏览器(firefox)最大的优点就是安全.快速.稳定.有些人抱怨火狐的功能太少,有些网页不能正常浏览.没关系,这些都不是问题,因为咱们有插件! 重要插件:注意:安装火狐之后可以直接在线安装以下插件,非常方便! MediaWrap :它能够将 ActiveX 控件方式的网页内嵌媒体转换成 Firefox 能够支持的 Plugin 方式,从而使 Firefox 也能够象 IE 一样正常播放 Wmplayer.Rmplayer

火狐浏览器firebug怎么用?火狐firebug使用教程

火狐firebug安装教程 1.你先得有一个Firefox浏览器了,我们安装好Firefox浏览器之后才可以安装firebug了. 好了到了这里关于火狐浏览器firebug插件的安装与使用方法111cn小编就简单的为各位介绍远了,如果还有不懂的可以自己安装了firebug插件一个个自己测试哦.

火狐新手入门教程

本文章献给所用使用其他浏览器正准备尝试火狐或者已经使用火狐的火狐新人们. 火狐是一款开源的非IE内核的浏览器.浏览器就就是普通用户访问网站与浏览网页时使用的软件,最常见的就是各个用户的windows电脑上桌面的 Internet Explorer(简称IE).同时也有很多其他的浏览器.许多浏览器是采用IE内核的,比如遨游,360浏览器等等.而火狐是采用自己独立GECKO内 核的浏览器. 那为什么要使用火狐呢?首先因为火狐不采用IE效率低下的内核,浏览速度和体验明显高于IE,同时也免受网络上针对众

Vue.js快速入门教程_javascript技巧

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U

如何在Python的Flask框架中使用模版的入门教程

  如何在Python的Flask框架中使用模版的入门教程?          概述 如果你已经阅读过上一个章节,那么你应该已经完成了充分的准备工作并且创建了一个很简单的具有如下文件结构的Web应用: microblog |-flask文件夹 |-<一些虚拟环境的文件> |-app文件夹 | |-static文件夹 | |-templates文件夹 | |-__init__.py文件 | |-views.py文件 |-tmp文件夹 |-run.py文件 以上给你介绍了在Python的Flask