Mozilla学习：《实战Firefox 扩展开发》心得。

恩这是我上个星期在研究的事情。现在趁着主管在搬桌子的空闲来将最近得到的一些体会写上。

最开始研究FireFox的时候不经意之间接收了许多新名词和新语言，比如XUL，XBL，XPCOM，DOM，DTD等一系列，有些张二和尚摸不到头脑的感觉。o(∩_∩)o...第一个星期我就一点点的看这些技术文档。英文……

http://developer.mozilla.org/en/docs/Main_Page 是MDC的老窝，这算是一份正式的官方技术文档。而中国的技术文档寥寥无几，很是诧异这一门在国外很流行的技术竟然这么不受国人认可，真的是只因为不是Windows盗版系统所能承受的原因吗？

随后我找了一篇，相信许多新手最初的教程都是这篇IBM程序员成富 (chengfbj@cn.ibm.com),在2008年2月所写的实战Firefox 扩展开发教程。

地址为http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/?ca=drs-tp0808。

算是将我带入了Mozilla的门槛之内了。其实这些代码很简单，我打出做完所有相关的时间也就二天左右。而剩下的三天就是查找那不知名的错误。

其他的小问题我就不深究了，我将其中需要注意的指出来就好。

1。Console真的是很有用，在进行拓展开发之时几乎所有的问题都是在那里找到突破口的。当然，这是废话，但如果众位要进行开发，请千万不要忘记这两样工具。另外Quickestart是可以快速重启的，方便快捷可以放在导航工具栏中。在JS中可以随时插入window.alert(“=。=");来进行控制看是否进行到这里了。这是我在没有好好利用Console之前所用的笨方法。

2。在进行拓展开发之时可以在火狐的Chrome文件夹中加载连接文件来进行测试。

D:/workspace/BIDownloader 是我的工作目录,请按照自己的相应目录进行设置。

//*

*BIDownloader.manifest*

content BIDownloader file:///D:/workspace/BIDownloader/content/

overlay chrome://browser/content/browser.xul file:///D:/workspace/BIDownloader/content/overlay.xul

locale BIDownloader en-US file:///D:/BIDownloader/locale/en-US/

skin BIDownloader classic/1.0 file:///D:/BIDownloader/skin/

//*

3。在显示图片的JavaScript方法中。要添加var XUL_NS="http://www.w3.org/1999/xhtml";为XUL_NS定义，这是一个标准，不用太在意。而且就算是添加了上句也没什么用处，不知道因为什么，总觉得这里成富将代码的复杂度增加了。而且我在rows和row上也弄混了。索性自己修改了下，我是这样写的。每一行的图片是4个。

<pre class="jscript" name="code">const COLUMNS_PER_ROW = 4;



function mainWindowOnLoad() {



	var params = window.arguments[0];



	var imageNodes = params.imageNodes;



	document.getElementById("mainWindow-save-path").value=getDefaultSaveDirectory().path;



	displayImages(imageNodes);



}

<pre class="jscript" name="code">function displayImages(imageNodes) {

	imageNodes = imageNodes || [];

	var cols = COLUMNS_PER_ROW, row, image, hbox, checkbox;

	var rows = document.getElementById("imagesContainer");

	for (var i = 0, n = imageNodes.length; i < n; i++) {

		var imageNode = imageNodes[i];

		var imageSrc = imageNode.getAttribute("src");

	

		if (imageSrc == "") {

			continue;

		}

		if (cols >= COLUMNS_PER_ROW) {

			row = document.createElement("row");

			row.setAttribute("align", "center");

			rows.appendChild(row);

			cols = 0;

			} 



			hbox = document.createElement("hbox");

			hbox.setAttribute("style", "padding:5px 5px 5px 5px;");

			image = document.createElement("image");

			image.setAttribute("src", imageSrc);

			checkbox = document.createElement("checkbox");

			checkbox.setAttribute("imageUrl", imageSrc);

			hbox.appendChild(checkbox);

			hbox.appendChild(image);

			row.appendChild(hbox);

			cols++;

	}



}

4.最后一个最重要的地方就图片就是下载不了。试想一下有个教程，前面做得都很好，却没有实际功能，真不知道开发出来到底要干什么。我的两天时间就放在这上了，开始找啊找啊走访多方资源。其实这是由于版本变化引起的，相信作者在2月份时候用的是FireFox2的版本，但现在已经是FireFox时代了，所以也希望作者能够更新一下代码，不要让我们这帮菜鸟走冤枉路了。

在下载单张图片的JavaScript方法中的最后一句，如果使用FireFox3版本是不能用 streamLoader.init(channel, observer, null); 。进不去的，要用 streamLoader.init(observer); channel.asyncOpen(streamLoader, channel);

源代码如下。

function downloadSingleImage(uri, callback) {

	var appInfo=Components.classes["@mozilla.org/xre/app-info;1"] 

        .getService(Components.interfaces.nsIXULAppInfo); 

    var isOnBranch = appInfo.platformVersion.indexOf("1.8") == 0; //自动查看版本的参数



	var ios = Components.classes["@mozilla.org/network/io-service;1"]

			.getService(Components.interfaces.nsIIOService);

	var imageURI = ios.newURI(uri,null,null);

	var imageFileName = uri.substring(uri.lastIndexOf("/")+ 1);

	var channel = ios.newChannelFromURI(imageURI);

	var observer = {

		onStreamComplete : function(loader, context, status, length, result) {

			var file = Components.classes["@mozilla.org/file/local;1"]

					.createInstance(Components.interfaces.nsILocalFile);

			file.initWithFile(saveDirectory);

			file.appendRelativePath(imageFileName);

			var stream = Components.classes["@mozilla.org/network/safe-file-output-stream;1"]

					.createInstance(Components.interfaces.nsIFileOutputStream);

			stream.init(file, -1, -1, 0);

			var bstream = Components.classes["@mozilla.org/binaryoutputstream;1"]

					.createInstance(Components.interfaces.nsIBinaryOutputStream);

			bstream.setOutputStream(stream);

			bstream.writeByteArray(result, length);

			if (stream instanceof Components.interfaces.nsISafeOutputStream) {

				stream.finish();

			} else {

			window.alert("close");

				stream.close();

			}

			if (typeof callback == "function") {

				callback();

			}

 

		}

	};

	var streamLoader = Components.classes["@mozilla.org/network/stream-loader;1"]

			.createInstance(Components.interfaces.nsIStreamLoader);



	if (isOnBranch) { 

        streamLoader.init(channel, observer, null); 



} else { 

        streamLoader.init(observer); 

        channel.asyncOpen(streamLoader, channel); 

}

}

其他的XPCOM功能什么的，大家主动去http://www.xulplanet.com/和Google查查吧。

千万要记住，要学会自主学习自主寻找答案。不管怎么样，多亏这篇教程的不严谨，而让我经历了这一星期的磨练，在踏入Mozilla拓展开发的道路上，我们还会迎来更多的挑战，这才是真正的乐趣。

真希望能够出现我们自己的FireFox

嘿嘿。有什么问题直接MSN我。chajn@126.com ，邮件也行啊。很想和如我一样的Mozilla之Fans来交流。

posted @ 2008-06-23 15:35 j2ee技术阅读(261) 评论(0) 编辑收藏举报

刷新页面返回顶部

Mozilla学习：《实战Firefox 扩展开发》心得。

公告