活动时间：9月24日（周五）14：00-17：00

活动地点：青岛市中国海洋大学崂山校区8区301教室

活动内容：开源软件知识讲座

主讲人：

青岛某跨国公司资深系统管理员

中国海洋大学Firefox校园大使

青岛大学OSQDU代表（原青岛大学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。看字面意思，第一个是“Chrome”的声明，而第二个则是与安装有关的文件。
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.cn/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.cn。

开始我们的开发之旅

创建项目

也许大家都已经习惯了使用集成开发环境来开发应用，但使用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时代的书， 参考价值不大，建议大家不要购买。这里 可以合法的在网上阅读。

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

• MDN / Developing add-ons
• MDN / XUL School Tutorial
• XUL – MDC
• foxbeans for Netbeans

原文链接：http://blog.osqdu.org.cn/develop-your-first-firefox-plugin_129.shtml

这学期像往常一样，是忙碌而充实的一学期。
本学期我们没什么活动，主要以内部培训为主，只是受烟台大学的邀请，我去做了一场关于Firefox插件开发的讲座，受到了不错的反响。
OSQDU本学期选定了火狐校园大使的接班人，我们正在进行内部培训。

第一场讲座4月17日上午开始，演讲的主要内容有初识开源软件、UNIX哲学与计算机和对计算机专业新生的一些建议。演讲共持续了大约2个小时。期间， 同学们饶有兴趣的对开源软件的历史、发展进行了提问。

第二场讲座也是本次活动的重头戏，张涤凡介绍了如何从头开发一个Firefox插件。

随后，Alex在会场上连接网络，使用了几个例子，介绍了一些高效信息检索以及搜索引擎高级使用的方法。

讲座的幻灯片以及源代码在OSQDU的网站上发布，下载地址是http://blog.osqdu.org.cn/osqdu_public/hello.tar.gz

更多活动照片及介绍，请访问http://difan.org.cn/post/161

这个学期我在火狐中国版开发了校园版火狐浏览器，虽然仍有不少缺陷，但也受到了同学们的理解和支持，这也是我的工作被同学们肯定的表现，我将在下个学期继续努力修正BUG，提供给同学们更适合的浏览器。

活动方面，这学期OSQDU举办了一次火狐青大版发布会活动。这次活动收到了北京Linux用户组和青岛Linux用户组的大力支持，虽然到场人数不是太多，但是仍然起到了良好的效果。

为了给大家一个网上交流平台，我在自己的服务器上新建了一个校园大使博客，用于发布活动新闻等。另外，青大在线——青岛大学最大的非官方论坛也为我们提供了论坛支持，为大家交流使用经验，提交BUG提供了方便。

我还组织了一次问卷调查，约150人参加了本次调查，为火狐校园版的开发提出了一些指导性的意见。

下学期由于我将面临GRE和托福两门重量级考试，时间比较紧，活动方面我只策划和青岛Linux用户组在自由软件日时进行一次现场推广活动，让大家现场体验并安装火狐中国版浏览器。另外我们将成立一个开放性的社团，推广自由软件，宣传Mozilla宣言。

图组：200905火狐在哈尔滨德强商务学院
2009年5月，哈尔滨德强商务学院在校运动会期间展示火狐中国形象G-Fox，可爱的小狐狸！

图组：200905泰山医学院火狐宣传
2009年5月，泰山医学院火狐校园大使和火狐团队开展了问卷调查、义务修电脑等校园宣传活动。

图组：200905青岛大学火狐校园版发布
2009年5月，青岛大学火狐团队发布了自己的校园版。

图组：200905开源杯湖北武汉三校Firefox校园版开发挑战大赛圆满落幕
2009年5月，开源杯湖北武汉三校Firefox校园版开发挑战大赛终于圆满落幕了。
武汉大学赛区和华中科技大学赛区的战况及其他

图组： 200904 火狐在燕大：秦皇岛市首届高校计算机文化展示月
2009年4月，燕大电脑爱好者协会举办的了秦皇岛市首届计算机文化展示月。

图组：20090412中国科大火狐校园大使参加龙芯Linux周日活动合肥场
4月12日，由龙芯俱乐部牵头组织的“龙芯 Linux 周日活动”在全国上海、北京、武汉、合肥、广州、深圳、成都、重庆、长沙、南京、苏州等十一个城市举行。其中合肥会场设在中国科学技术大学，活动由中国科大Linux用户协会（LUG）具体负责。中国科大火狐校园大使也应邀参加了这次Linux爱好者、龙芯爱好者和开源爱好者的集会。

图组：20090308InstallFest（北航、北邮）
春天来了，衣服要换季了，电脑也该换装了！
3月8日，北航、北邮汇集诸多开源高手教大家如何安装、使用开源操作系统，当然，还有这款开源的浏览器——Firefox（火狐）。

视频：火狐在北邮科技节
北邮Firefox校园版开发及GlassFish技术报告
主讲：张俊俊，蒋健
发起人：沈晓松 北邮Firefox校园大使； 徐春丹 北邮sun校园大使

这次活动的重头戏就是校园情景剧。作为青岛大学的学生，我们从实际出发，深入研究了青岛大学学生的上网习惯后编出了本次活动的剧本，在同学中取得了良好的反响，并有很多同学当场表示要试用火狐浏览器校园版替代当前的浏览器。

本次发布会还就Web标准与浏览器大战、Mozilla宣言进行了介绍。

来自北京Linux用户组的Pockey Lam女士在开源软件介绍的部分中介绍了她在从Mac迁移到Linux平台的过程，并与同学们进行了亲切的互动，切实解决了不少同学使用开源软件时遇到的实际问题。

来自北京Linux用户组的Frederic Muller先生对自由软件进行了介绍。

据服务器统计显示到25日为止Mozilla Firefox青岛大学版下载量已经超过了100份，并且保持了良好的增长势头，而我们作为青岛大学开源软件的先行者必将继续努力为青大学子提供更好的选择，为青岛大学的信息化继续做贡献。