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

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

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

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

随后我找了一篇，相信许多新手最初的教程都是这篇IBM程序员成 富 ([e-mail]),在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个。

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);}

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我。[e-mail] ，邮件也行啊。很想和如我一样的Mozilla之Fans来交流。