`
zhaohaolin
  • 浏览: 1012560 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

开发你的第一个Firefox插件【转】

阅读更多

搭建你的应用开发环境

Firefox相关设置的调节

创建Profile

新建一个Firefox的Profile,以便拥有一个纯净的开发环境,另外易于安装开发者插件。
使用以下方法创建一个新的Profile:
UNIX用户


firefox -no-remote -P develop

Windows NT用户
创建Firefox的快捷方式,传入参数 -no-remote -P develop

修改Firefox配置

使用该Profile打开Firefox,在地址栏内输入about:config ,按下enter (或者return 按钮。

修改以下参数为给出的值。下面将解释这些参数的含义。

  • javascript.options.showInConsole = true
  • 将chrome文件中的错误显示在Console里。

  • nglayout.debug.disable_xul_cache = true
  • 关闭XUL缓存,这允许不重启而改变窗口以及对话的内容。这里,可以使用目录而不是Jar。但是Overlay改变后,overlay文档必须重载。

  • browser.dom.window.dump.enabled = true
  • 这将允许dump()函数输出到stdout里。参考window.dump函数。特权应用也可用nsIConsoleService。

  • javascript.options.strict = true
  • 启用严格JavaScript错误提示。

  • extensions.logging.enabled = true
  • 这将给出更多关于安装以及更新插件的信息。

  • nglayout.debug.disable_xul_fastload = true (仅限Gecko 2.0+ (Firefox 4.0+))
  • dom.report_all_js_exceptions = true

Mozilla插件简介

什么是Mozilla插件

Mozilla插件是一段程序。通常,界面使用XUL语言(XML的一个子集)或者XUL内嵌HTML编写,而程序逻辑使用ECMAScript (Standard ECMA-262)(俗称JavaScript)编写。
XUL可以是独立的窗体,可以是对话,也可以是overlay。Overlay可以用于修改已经构建好的界面。下面是一段示例的XUL代码:

<overlay id="main-overlay" xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

 <menu id="file_menu">
  <menuitem name="Example One"/>
  <menuitem name="Example Two"/>
  <menuitem name="Example Three"/>
  <menuitem name="Example Four" position="1"/>

 </menu>

</overlay>

而JavaScript可以用来定义程序的行为。按照惯例,我们给出一段“你好世界”程序。

	alert("Hello World!");

CSS可以用于自定义样式,而XPCOM可以用于调用Firefox提供的接口。另外,现在有一些JavaScript Library,可以直接使用而降低代码难度。

几个重要的文件

一个Mozilla插件大致由以下文件组成:

.
│	chrome.manifest
│	install.rdf
│
├─defaults
│	└─preferences
│		pref.js
│
└─chrome
	│
	├─content
	│	├─overlay
	│	│	ff_overlay.xul
	│	│
	│	└─tools
	│
	├─skin
	│
	└─locale

最重要的两个文件是chrome.manifest和install.rdf。看字面意思,第一个是&ldquote;Chrome&rdquote;的声明,而第二个则是与安装有关的文件。
chrome是用来形容XUL应用中的所有GUI结构性元素的名词。例如,Firefox浏览器中除了网页内容之外的所有内容都是chrome。

chrome.manifest

下面是一个示例文件:

content imgview chrome/content/
overlay chrome://browser/content/browser.xul chrome://imgview/content/overlay/ff_overlay.xul

可以按照需要进行修改。特别注意的是,overlay行中第三个元素将被附加在第二个元素上,第一个关键词是overlay。

install.rdf

本文件较简单。请参考下面给出的文件进行修改。

<RDF:RDF xmlns:em="http://www.mozilla.org/2004/em-rdf#"
         xmlns:NC="http://home.netscape.com/NC-rdf#"
         xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

  <RDF:Description RDF:about="urn:mozilla:install-manifest"
                   em:id="imgview@osqdu.org.cn"
                   em:name="OSQDU Image Viewer"
                   em:iconURL=""
                   em:version="0.0.0.1"

                   em:type="2"
                   em:creator="OSQDU::Alex"
                   em:developer="OSQDU::Alex"
                   em:description=""
                   em:homepageURL="http://blog.osqdu.org/code-review-of-osqduimg_xx.shtml">

     <!-- firefox -->
    <em:targetApplication RDF:resource="rdf:#$eAzAq3"/>
  </RDF:Description>
  <RDF:Description RDF:about="rdf:#$eAzAq3"
                   em:id="{ec8030f7-c20a-464f-9b0e-13905321042f}"

                   em:minVersion="3.1a1pre"
                   em:maxVersion="3.6.*" />
</RDF:RDF>

代理文件

在开发应用时,可以使用代理文件代替build好的插件。这类似UNIX中的软链接。
打开Profile目录内的应用ID目录(例如 $MOZ_PROFILE/extensions/{ec8030f7-c20a-464f-9b0e-13905321042f} /)。
如果不愿使用GUID(Global Unique Identification Number),也可以使用 “name@domain” 的方式命名,例如
imgview@osqdu.org

开始我们的开发之旅

创建项目

也许大家都已经习惯了使用集成开发环境来开发应用,但使用IDE并不是好主意,这里,我推荐使用Vi IMproved
作为主要的编辑器,原因不再赘述,如果不会使用vim,则可以使用Emacs—两个总是要会一个的,其他
推荐的编辑器有Notepad ++,为使用Windows而不想学习高级编辑器的程序员准备。

在Mozilla网站上,我们可以通过简单的通过Add-on Builder插件
生成一个新的插件。下载zip文件,使用你喜爱的存档管理器或unzip 实用程序解压缩,修改install.rdf
以及chrome.manifest .

代码的编写

这一部分其实我并不想完成,因为代码归根结底还是程序员自己写的,而不是看Tutorial得到的。但是考虑到
有些同学是第一次接触Mozilla开发,对XUL, JavaScript并不熟悉,因此我们以Firefox应用挑战赛
的例程作为例程来讲解怎样开发一个真正的 插件。请

点击这个链接(http://dl1.g-fox.cn/campus/20100618/demo.xpi) 下载本例程。关于应用挑战赛,

点击这个链接(2010Firefox火狐浏览器应用挑战赛揭幕!——参加大赛,赢取笔记本电脑和就业机会,抱着本本上班去!)

了解详细情况。

解压缩demo.xpi,列目录,我们可以看到下面的文件:

total 224
drwxr-xr-x  3 alex  staff   102B  4 23 09:13 chrome
-rw-r--r--@ 1 alex  staff   231B  4 22 16:19 chrome.manifest
drwxr-xr-x  3 alex  staff   102B  4 23 09:13 defaults
-rw-r--r--  1 alex  staff   102K  6 17 13:35 demo.xpi
-rw-r--r--@ 1 alex  staff   923B  4 28 12:16 install.rdf

修改install.rdf 以及chrome.manifest 可以修改本项目的描述。下面我们将主要
以讲解chrome/content 内的代码。

main.xul 是在chrome.manifest 里定义的overlay ,打开,我们可以看到
这是一个标准的XML文档,但命名空间是特殊定义的,元素均是window 的child。其中,包含了一些
script,这些script就是用于控制程序逻辑的了,例如tools/dom.js 控制DOM相关的程序。

XUL 的元素有很多,但是个人认为并不需要完全记忆。只要记住一些基本的元素,例如window
, popup , vbox , hbox 等即可。XUL的样式可以通过CSS来订制,这也是
有些Firefox插件可以做的非常漂亮的技术基础。目前,Firefox支持CSS3以及HTML 5,可以在此基础上开发
大量美轮美奂的插件。

有些时候,需要在XUL内插入HTML,这时,只需用<html:{HTMLTAG}>即可。但是要记住的是这是XML,
标签一定要闭合,否则会在parse时出错,导致浏览器无法正常使用,特别是在overlay到浏览器时。当然,最要命的
chrome.manifest 出现问题。曾经在我开发Firefox插件时,有一天浏览器总是崩溃,只要在终端
里输入firefox -P ,选择我的开发profile之后,浏览器就立即segfault。百思不得其解,最终重
新编译Firefox (在Linux下),上了gdb,慢慢调试,才发现是chrome.manifest 让浏览器疯掉了。

有一个非常好用的工具,XUL
Periodic Table
。这个工具可以用于查询各种各样的布局,直接拿过来copy and paste即可。

下面讲解怎开发程序逻辑。首先要介绍的是dump("String") 函数。本函数非常有用,随时可以在
终端里dump出一行信息,用于监视程序的运行。

JavaScript很简单,语法松散,当然后果就是有时候行为有点怪异。这里举几个简单的例子,告诉大家如何调用
Mozilla提供的接口。截图可能是非常常用的功能,而HTML 5里的canvas 元素正好可以做这件事情。

function CaptureEntirePage() {
  var doc = getBrowser().selectedBrowser.contentDocument;
  var win = window.top.getBrowser().selectedBrowser.contentWindow;
  var left = 0;
  var top = 0;
  var width = doc.documentElement.scrollWidth;
  var height = doc.documentElement.scrollHeight;
  var fName = "shot.png";
  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "html:canvas");
  canvas.style.width = String(width) + "px";
  canvas.style.height = String(height) + "px";
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(left, top, width, height);
  ctx.save();
  ctx.drawWindow(win, left, top, width, height, "rgb(255,255,255)");
  ctx.restore();
  var file =  SaveTemp(canvas, fName, 'S');
  return canvas;
}

上面的程序是我曾经开发过的一个插件的一部分。由于上段程序调用的函数都很简单,这里不再讲述如何使用。函数的
使用方法可以去MDC(Mozilla Developer Center)查询。MDC/Code snippets
里有很多现成的非常常用的代码用来参考,有一些CPAN的意思,当然不如CPAN大且全。

下面简单提一下文件操作,以此为例讲解如何使用XPCOM函数。

var file = Components.classes["@mozilla.org/file/directory_service;1"].
                     getService(Components.interfaces.nsIProperties).
                     get("ProfD", Components.interfaces.nsIFile);  

这里,file 是一个nsIFile 类型的变量。ProfD 是Profile目录,其他常用
的目录还有Home,操作系统的家目录,例如/home/alex 或者/Users/alex 。TempD是
操作系统的临时目录,例如/tmp/var/tmp

下面介绍如何取一个nsIFile 类型变量的路径。

var filePath = file.path;

其实就是这么简单。可以用file.create 的方法添加目录,然后用下面的代码确认:

file.append("NewDirectort");
if( !file.exists() || !file.isDirectory() ) {
   file.create(Components.interfaces.nsIFile.DIRECTORY_TYPE, 0777);
}

上面就添加了一个权限是777(drwxrwxrwx) 的目录。777这个选项似乎对于Windows这类没有安全
特性的操作系统无效。

关于nsIFile的更多信息可以在MDC上查询,这里采用文件操作仅为了讲解较有代表性的函数,带领大家入门。

如何查找更多的信息

有一本书叫做Creating Applications with Mozilla ,但这似乎是Netscape时代的书,
参考价值不大,建议大家不要购买。这里
可以合法的在网上阅读。

我推荐的学习方法是在写代码的过程中进行学习,这样才会有最好的学习效果。只看书,看资料而不写代码是
学不好写程序的。但是,资料仍然是必备的。下面推荐一些互联网资源,希望能帮助到大家。


Copyright (c) 2010  Alex Zhang
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.2
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
分享到:
评论

相关推荐

    Firefox 火狐 插件大全

    "Firefox 插件大全"是一个集合了众多实用插件资源的压缩包,旨在帮助用户丰富他们的火狐浏览器体验。 在这个压缩包中,我们看到的文件名称列表可能代表了一些与火狐插件相关的组件或库: 1. NPSWF32.dll:这是一个...

    火狐工具 web插件

    1. **什么是Web插件**:Web插件是第三方软件组件,它们可以嵌入到Firefox浏览器中,以扩展其基本功能。这些插件通常由个人开发者或公司开发,以满足用户对浏览器的个性化需求。 2. **安装和管理插件**:在Firefox中...

    我的Firefox插件开发之旅——从零开始

    作者开始时对于Firefox插件开发一无所知,因此在网上搜索相关资料,并找到了一个FF扩展的生成向导,但生成的扩展包提示为错误的安装包。作者通过研究发现,Firefox的扩展和插件是两种不同的概念,扩展是一种zip包,...

    firefox翻译插件

    Firefox是一个开源且高度可定制的网络浏览器,其丰富的扩展库是它的一大特色。"quick-translator" 描述可能指的是一个特定的翻译插件,该插件可能是快速、便捷的翻译工具,允许用户即时翻译浏览的网页或选定的文本。...

    火狐ActiveX插件安装

    ##### 第一步:下载Netscape6/Mozilla ActiveX插件 - **下载地址**:访问提供的链接`http://updates.merc-int.com/testdirector/td80/others/netscape/npmozax.exe`下载插件文件npmozax.exe。 - **文件类型**:这是...

    Firefox插件开发概述

    Firefox插件开发是针对基于Gecko内核的浏览器(如Firefox、Chrome等非IE内核浏览器)的一种扩展技术,主要涉及NPAPI(Netscape Plugin Application Programming Interface)。NPAPI是一种允许第三方开发者创建插件,...

    firefox 插件集成版

    标题 "Firefox 插件集成版" 暗示我们讨论的是一个特别版本的 Mozilla Firefox 浏览器,其中集成了多种扩展或插件,以提供更丰富的功能和用户体验。这个描述简洁,没有给出具体集成的插件信息,所以我们将探讨Firefox...

    firefox插件打开ooxml

    1. **插件安装**:用户可以在Firefox的官方插件商店(如Mozilla Add-ons)或其他可信的第三方资源中找到能处理OOXML的插件。例如,"OpenXMLViewer_win_firefox.xpi"可能就是这样一个插件,它允许Firefox直接打开并...

    我的Firefox插件开发之旅

    最后,作者开始尝试编写自己的第一个扩展,虽然可能只是一个简单的示例,但这是理解并掌握Firefox插件开发的第一步。这个过程需要耐心和时间,因为涉及到的知识点众多且深入。 总之,Firefox插件开发涉及了对...

    火狐NP插件开发

    总之,火狐NP插件开发是一个涉及C++编程、浏览器插件机制以及跨语言交互的复杂过程。通过这个过程,开发者可以扩展浏览器的功能,实现自定义的网页交互体验。尽管现在NPAPI已逐渐被弃用,但对于理解浏览器扩展的底层...

    火狐浏览器插件-获取mac地址源码

    要理解并使用这个插件的源码,你需要熟悉JavaScript以及可能的NPAPI插件开发,了解火狐插件的架构,以及如何在VS2010中构建和调试C++项目。同时,还需要对网络协议和操作系统级别的设备访问有一定理解。对于初学者,...

    firefox调用dll需要的activex控件和插件

    在IT领域,尤其是在Web开发和浏览器扩展中,Firefox(火狐)作为一个开源且跨平台的浏览器,有时需要与本地系统进行交互,例如调用DLL(动态链接库)文件。DLL文件通常包含可重用的代码和数据,允许多个程序共享同一...

    Firefox火狐浏览器官方5.0-mac版本dmg安装包

    Firefox火狐浏览器,这款由Mozilla基金会开发的开源网络浏览器,自发布以来就以其强大的安全性能、丰富的扩展插件以及高度的用户定制性赢得了广大用户的喜爱。本文将详细介绍Firefox 5.0 Mac版本的安装过程及相关...

    Firefox火狐浏览器官方Setup 56.0b9-win64版本exe安装包

    《Firefox火狐浏览器56.0b9-win64版本:深入解析与使用指南》 Firefox,这款由Mozilla基金会开发的开源网络浏览器,以其强大的安全性能、高度的自定义性和跨平台兼容性,在全球范围内拥有大量的用户。56.0b9版是...

    Firefox火狐浏览器官方35.0.1-win32版本exe在线安装包

    《Firefox火狐浏览器35.0.1-win32版本:深入解析与使用指南》 Firefox,这款由Mozilla基金会开发的开源网络浏览器,以其强大的安全性能、高度的自定义性和出色的隐私保护机制,在全球范围内拥有大量的忠实用户。...

    Firefox火狐浏览器官方Setup 89.0.1-win64版本exe安装包

    Firefox火狐浏览器,由Mozilla基金会开发,是一款全球知名的开源网络浏览器。本文将围绕"Firefox火狐浏览器官方Setup 89.0.1-win64版本exe安装包"展开,详细介绍该版本的特点、安装流程以及使用技巧,旨在帮助用户更...

    NPAPI-Firefox插件示例

    描述中的"一个基本的框架"暗示了这个压缩包可能包含一个简单的NPAPI插件项目,可能包括源代码、头文件、构建脚本和其他必要的资源,用于演示如何在Firefox中集成自定义功能。 在NPAPI插件开发中,通常会涉及以下几...

    Firefox火狐浏览器官方45.0b1-win32版本exe在线安装包

    《Firefox火狐浏览器45.0b1-win32版本:深入解析与使用指南》 Firefox,这款由Mozilla基金会开发的开源网络浏览器,以其强大的安全性能、高度的自定义性和丰富的扩展插件闻名于世。在本文中,我们将聚焦于Firefox的...

    Firefox火狐浏览器官方49.0.2-win32版本exe安装包

    《Firefox火狐浏览器49.0.2-win32版本:深入解析与使用指南》 Firefox,又称为火狐浏览器,是由Mozilla基金会开发的一款开源、跨平台的网页浏览器。这款浏览器以其高度定制化、安全性和隐私保护功能而受到全球用户...

Global site tag (gtag.js) - Google Analytics