About Alex Zhang

OSQDU联合创始人

搭建你的应用开发环境

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="https://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".

Writted in the VI Editor

今天中午,我,作为OSQDU排骨米饭研究会成员之一,吃完排骨米饭之后,正叼着一个冰激凌走回自习室的过程中,碰到了网络中心的某老师,活立即就来了……
今天要搞定所有的PTR解析,不知道哪里要求的。我们的IP是211.64.164.0-211.64.191.255,手工写要写8192行,显然不行。于是就写了个小Python程序,贴在下面,用于生成PTR记录。注意,这里可不管你本来的解析了。是个dirty code,但是可以工作,这就达到我的要求了。
下面是base64编码的文件:

IyEvdXNyL2Jpbi9lbnYgcHl0aG9uCgpoZWFkZXIgPSAiIiIKJFRUTCAxSAoKQAlJTiBTT0EJUURV
MS5xZHUuZWR1LmNuLiBob3N0bWFzdGVyLnFkdS5lZHUuY24gKAoJCQkyMDEwMDcwNgk7c2VyaWFs
ICh2ZXJzaW9uKQoJCQkzSAk7cmVmcmVzaCBwZXJpb2QKCQkJMUgJO3JldHJ5IHJlZnJlc2ggdGhp
cyBvZnRlbgoJCQkxVwk7ZXhwaXJhdGlvbiBwZXJpb2QKCQkJMUgJO05lZ2F0aXZlIGNhY2hpbmcg
VFRMCgkJKQoKCQlJTiBOUwlRRFUxLnFkdS5lZHUuY24uCgkJSU4gTlMJUURVMi5xZHUuZWR1LmNu
LgoKIiIiCmZvciBjbGFzc2MgaW4gcmFuZ2UoMTY1LCAxNzUpOgoJI0VYVEVSTkFMLmkuLjY0LjIx
MS5pbi1hZGRyLmFycGEKCWZpbGVuYW1lID0gIkVYVEVSTkFMLiVkLjY0LjIxMS5pbi1hZGRyLmFy
cGEiICUgY2xhc3NjCglwcmludCAiR2VuZXRhdGluZyAlcyAuLi4iICUgZmlsZW5hbWUKCWNvbnRl
bnQgPSBoZWFkZXIKCWZvciBpcGFkZHIgaW4gcmFuZ2UoMCwgMjU2KToKCQljb250ZW50ICs9ICIl
ZAkJSU4gUFRSCTIxMS42NC4lZC4lZC5pcC5xZHUuY24uXG4iICUgKGlwYWRkciwgY2xhc3NjLCBp
cGFkZHIpCglvdXRwdXQgPSBvcGVuKGZpbGVuYW1lLCAndycpCglvdXRwdXQud3JpdGUoY29udGVu
dCkK

用法: ./gen.py 即可生成一大堆文件。注意修改文件名以及特殊IP的解析。
点击这里在新窗口中看这个文件并复制下来。

OSQDU作为青岛大学的非官方开源组织,在很长一段时间以来都在为青岛大学的学生提供便利的服务。最近,所有的同学都切换到了校园网,因此,我们有必要整理出来我们的所有服务,以便大家使用 🙂
首先,是OSQDU 3P下载系统(BETA)。地址 http://dl.osqdu.org.cn/ (仅限内网)。内容丰富,但内含的版权内容请慎重使用。
然后,就是为全青岛市服务的镜像了。地址 http://mirror.osqdu.org.cn/。包含多种开源软件以及优秀商业软件的镜像,方便大家使用。注意,我们禁止一切非法的恶意下载工具,包括但不仅限于迅雷、Flashget、QQ旋风等。另外,低版本的IE浏览器也将被重定向到另一个页面,提示您尽快升级浏览器或者使用更安全的浏览器。
再次,是青大Portal。这个Portal不是移动的计费Portal,而是服务于同学,发布常用信息的地方。基于开放源代码的Drupal搭建。地址 http://portal.qdu.cn/
然后,是我们的WebOS平台。这个很好玩的,运行在一台拥有1GB海量内存,2.8GB高速超线程奔腾4处理器的联想都不用想的服务器上。放心,跑不死的。地址是 http://cloud.osqdu.org.cn/
如果你发现上网速度变慢了,请看校园网流量查看。这里你可以了解校园网到底出口流量占用了多少。
有什么意见和建议,欢迎发送电子邮件到青岛大学网络中心(nic @ qdu.ac.cn)或者我(Alex, alex @ qdu.ac.cn)。

Mr Alex Zhang have resigned from general secretary of OSQDU Greater China Region for health reasons.
Mr Frank Song will become temporary general secetary of OSQDU.
New general secetary will be elected soon.
OSQDU Co-founder, Alex Zhang
June 7th, 2010

OSQDU中国:上周末,承蒙烟台大学计算学院软件协会邀请,OSQDU成员、Firefox校园大使张涤凡前去进行开源软件宣传讲座。讲座受到了谋智网络(Mozilla Online)的大力协助。

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

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

alexAlex正在介绍如何开发插件

alex

studentsstudents聚精会神的同学们

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

另外,本次讲座的幻灯片以及源代码也在OSQDU的网站上发布了,下载地址是https://blog.osqdu.org/osqdu_public/hello.tar.gz