Firefox扩展开发学习杂记

faunus · 发表于 2008-11-12 20:28:10

最近玩了一把Firefox的扩展开发，感觉不错。倒腾出来一个ChinaStock，有兴趣的可以瞧瞧（现在还被放在Sandbox里面，必须登录才能下载安装；同时因为被放在sandbox里面，暂时还不能被自动更新版本）。如果您愿意的话，也可以直接在本站下载安装。
  扩展开发中用得着的扩展（有点拗口）：
  Extension Developer's Extension  (xpi download / install address)快速将扩展目录打包成xpi文件，在不重启Firefox的情况下重新载入所有扩展以及其他实用小功能。必备！如果不使用该扩展快速重载扩展的话，每次修改代码之后都必须从Firefox的菜单栏选择“退出”关闭Firefox再打开才有99%的几率保证该Chrome内容是最新修改后的，那叫一个痛苦。即使设置参数 nglayout.debug.disable_xul_cache = true ，也只是减少了修改窗口或对话框之后的重启而已。
  Chrome List + Extension Manager Extended学习其他人写的扩展总是最快入门的方法。 Chrome List提供了扩展浏览功能，可以查看扩展安装之后存在的问题和jar包里面的源代码；Extension Manager Extended则扩展了Firefox的扩展软件列表功能，直接显示每个扩展的ID，通过右键可以直接打开扩展存放的目录，再不需要去资源管理器找深埋在Application Data\Mozilla\Firefox\Profiles\!@#$%^.default\extensions里的jar包，也不需要去猜测使用UUID作为ID的扩展到底对应在哪个子目录了。
  DebugLogger + Console2 DebugLogger 是 dump() 的优化版本。可以按照每个项目分别查看各自的dump信息。像 Firebug 这样的大师级扩展属于开发必备不需多讲，这个 DebugLogger 相较而言属于轻量级并且原始的调试辅助工具。配合它，至少不需要再用alert来简单粗暴了。 Console2 则是错误控制台的加强版，实现了 Firefox 3 错误控制台的一些特性。
  现有HTML代码的利用：
  虽然并不被鼓励，但对于更熟悉HTML语法的开发者来说，最快捷编写扩展界面的方法是在 XUL 中引入 HTML 命名空间（为根标签增加属性 xmlns:html="http://www.w3.org/1999/xhtml"），然后给所有使用到的HTML标签添加 html: 前缀（比如 <div>...</div> 应该写成<html:div>...</html:div>）即可。当然，因为 XUL 是基于 XML的语言，所以所有的标签属性都应该是小写格式，并且空tag必须进行关闭。
  相应的，由于上述定义方式下HTML 元素标签定义不在主命名空间内，当进行 DOM 操作的 js 代码在创建 HTML 元素的时候，也不能直接使用 createElement ，而必须使用 createElementNS 。比如 document.createElementNS("http://www.w3.org/1999/xhtml","html:div");
  关于扩展ID：
  每个扩展软件都必须有个唯一的标识ID，建议是使用UUID，也可以使用形如 extensionname@my.domain（必须有@符号但不必是真实的域名）的字符串。生成UUID的方法很多：windows下可以安装微软自己提供的GUID Generator，*nix 下直接敲命令 uuidgen ，或者访问这里在线生成一个。个人觉得虽然UUID不会造成ID冲突，但 @ 形式的可读性更强一些，否则不靠前面提到的扩展帮忙要把ID跟功能对应起来还真是件费力的事情。
  扩展描述的本地化：
  在 Firefox 扩展管理器中，每个扩展的名字下面都有一段简短的描述(description)，这段描述来自扩展根目录下的 install.rdf 文件。将这段描述进行本地化处理的方法是在扩展目录下创建子目录 defaults/preferences ，在子目录下新建一个 js 文件 myextname.js ，包含以下内容：
  pref("extensions.ReplaceWithExtensionIDHere.description", "chrome://myextname/locale/myextname.properties");
  同时在 locale 语言包文件 myextname.properties 中添加一行：
  extensions.ReplaceWithExtensionIDHere.description = 经过本地化的描述内容
  扩展的打包发布：
  如果使用 Extension Developer's Extension 提供的extension builder 进行打包，它会在build的过程中自动将chrome.manifest中的目录配置替换成jar:chrome的形式，而不需要自己来回切换不同的chrome.manifest配置。当然前提是你的扩展工作目录按照约定的结构进行组织。如果你没有把content / skin / locale 目录放在工作根目录而是放在了 chrome 子目录下的话，打包之后xpi文件会同时包含jar文件和chrome整个目录。生成xpi文件之后，到 Firefox Add-ons 的开发者工具界面进行注册/登录/上传即可。
  如果代码实际是兼容Firefox的最新版本的，只是因为在install.rdf里面的em:maxVersion设置了过老的版本号而导致你发布在AMO上的扩展被认为不兼容而无法下载的话，可以登录AMO后进入开发者工具管理界面，选择相应的扩展，点击版本历史列出的版本号链接进去，就可以快速修改该版本xpi的兼容版本范围（找这个修改的地方找了N久，OrZ）。
  参考文档：

在决定开始开发Firefox扩展之前，先看看如何 Setting up extension development environment 绝对是磨刀不误砍柴工的
按照 Getting started with extension development 的步骤，很快可以写出自己的第一个扩展。当然，这也只是程序员都知道的 Hello world 而已
也可以看看中文版本的使用 XUL 实现浏览器扩展 1 , 2 ，如果对XUL本身还有疑惑，应该看看该文最后的参考链接
要进行完整的语言本地化处理，可以参考Firefox 扩展中文化实例教程

faunus · 发表于 2008-11-12 20:33:54

https://addons.mozilla.org/zh-CN/firefox/addon/4453

Lets you take a peek at the files under the hood of your Firefox orThunderbird installation and profile. Also works with XULRunnerapplications (starting XULRunner 1.9a7)

Chrome List adds an "Explore Chrome..." item to the Tools menu, from which you can:

- browse the structure of chrome:// as if it were a normal directory tree.
- open chrome:// mapped files in Firefox/Thunderbird;
- view the source code of such files;
- save such files to somewhere else;
- inspect where the files are being mapped from (jar files, local directory, etc.);
- look for them in LXR;
- list possible problems with the Chrome Manifests in use in the Error Console;

Note that this extension is not going to be very useful for you unlessyou're actually interested in the inner workings of Firefox,Thunderbird or (some of) the extensions you have installed.

faunus · 发表于 2008-11-12 20:34:39

https://addons.mozilla.org/zh-CN/firefox/addon/2195

Use the Addon Manager to view the id, date installed, compatibleapplication versions, and the folder of an extension or theme. Checkhttp://extended.spanglerco.com for more information andhttp://firefox.spanglerco.com for more extensions.

Change log and known bugs can be found at http://extended.spanglerco.com/log.txt

faunus · 发表于 2008-11-12 20:37:36

https://addons.mozilla.org/zh-CN/firefox/addon/3983

An extension developer's debug console that is a cleaner alternative tousing dump(). It breaks up debug message to be unique per extension orproject and let's you view them independently in a clean console.

faunus · 发表于 2008-11-12 20:38:33

https://addons.mozilla.org/zh-CN/firefox/addon/1815

Console² (pronounced Console Squared or Console Two) replaces theJavaScript Console with what could be the next generation ErrorConsole.

faunus · 发表于 2008-11-12 20:39:37

https://addons.mozilla.org/zh-CN/firefox/addon/1843

Firebug integrates with Firefox to put a wealth of development tools atyour fingertips while you browse. You can edit, debug, and monitor CSS,HTML, and JavaScript live in any web page...

Firebug 1.2 requires Firefox 2 or 3.