The Art of IT

我拥有自己的 blog 空间，新空间转移

itart — Tue, 08 May 2007 06:20:09 +0000

大家好，发个通知，那就是我已经申请下了独立的域名，新的域名是 www.lewislv.org 。

同时，希望经常看我 Blog 的朋友，能将您的 feed 地址更正成以下任意一下

http://www.lewislv.org/blog/?feed=rss2
http://www.lewislv.org/blog/?feed=rss
http://www.lewislv.org/blog/?feed=atom

还有，已经加为好友链接的朋友们，希望你们也能将链接地址更新成

http://www.lewislv.org

我将在未来的时间里，一直使用这个比较正式的地址发布我的文章和作品。

最后，谢谢您在最近的一段时间里，关注我写的那些东西。我也将一如既往地将一些想法、经验写下来，希望能对您的工作、生活等有所帮助。

eYou Anole — Firefox 下的网站皮肤扩展

itart — Mon, 23 Jan 2006 09:00:10 +0000

一. 介绍

你想定制某个网站的外观吗？你想对某个网站实现 css Zen Garden 似的效果吗？不会写 Greasemonkey 下的 JavaScript 脚本？没关系，你一样可以定制“别人”网站的外观，只要你是一位紧跟标准的 CSS 设计师。eYou Anole 允许你像 css Zen Garden 那样，为已知的网页重新设计布局，改写界面，实现不同的页面风格；你将不必再束缚于网站本身所提供的网页外观。你只需编写一个符合要求的 ZIP 文件（它被称为“网站主题文件”），此文件能很简单地实现你的“重构”梦想。更进一步，如果你把编写好的网站主题文件发布，那么将会有更多的人因此受益。那些下载并安装了你主题文件的人们，他们将像艺术殿堂里的欣赏者一样，时刻感受着艺术设计和重构所带来的“别样”气息。“禅艺花园”似的效果，将不再局限于 css Zen Garden 网站，你可以随时随地的对感兴趣的网站进行“修剪”。

如果你仅仅是一般的网站访问者，并且对某些网站的界面和配色十分不满，你同样可以利用此工具来改善你的用户体验。你只需下载网站主题文件（当然，这全得益于上面的 CSS 设计师），然后通过 eYou Anole 将“网站主题文件”安装机器上。在启用这些主题之后，当你浏览符合“网站主题”定义下的网站时，它将会按“网站主题”所指定的效果进行显示。

还犹豫什么，装有 Firefox 浏览器的用户赶快来体验一下吧！下面是几个写好的网站主题文件，它们只是一些示意。如果你有兴趣的话，你完全可以参与到网站主题的编写中来，像 Greasemokey 那样，到时我们可能会建立一个 eYou Anole 的开发社区。那样，网页界面将不再在网站单方面的约束，而是一个可由你控制和选择的享受，是一个任由你发挥创作激情的场所。

在此，我鼓励广大的 CSS 开发人员和网页设计人员参与到其中。因为只有你们的参与，并且将编写好的网站主题文件发布，这一创意才能被真正的推广。另外，eYou Anole 的当前版本是 0.1，它只提供了一些基本的功能，许多的新功能和特性还有待开发。我想，当它被维护到 1.0 版本时，一定会是一个相当不错的 Firefox 扩展了。本人在此期待大家的反馈意见，包括普通用户的使用意见和开发人员的需求建议。

二. eYou Anole 的下载地址

http://team.eyou.com/ext/anole/anole.xpi

三. 网站主题的安装方法

提示：下面介绍的是“网站主题的安装方法”，请不要误以为是 eYou Anole 的安装方法。并且我假设，你已经把 eYou Anole 安装在 Firefox 上了。如何安装扩展属于 Firefox 的使用常识（eYou Anole 同样属于 Firefox 扩展），所以文本不做介绍。

主题文件的安装方法很简单，在 eYou Anole 安装后，会在 “工具（tools）”菜单下添加一个名为“网站主题管理”的菜单项。点击此菜单项后，会弹出名为“网站主题管理”的窗口。点击其中的“安装”按钮，找到符合格式要求的主题文件，即可完成安装。

将网站主题设置为启用状态，当你浏览主题文件定义下的网站时，你会看到 CSS 设计师精心安排后的页面效果。

四. 示例的主题文件

下面的网站主题文件是由 Realazy 精心设计的，他现在是 eYou 团队的成员，同时也是一位紧跟标准化设计的 CSS 设计师。希望他设计的这 3 套网站主题，可以触发你的 CSS 设计灵感和激情，让你对 eYou Anole 有一点儿感性的认识。网站主如下：

I. css Zen Garden

效果：

下载地址：http://team.eyou.com/files/hades.zip

浏览测试地址：http://www.csszengarden.com/ 或 http://csszengarden.com/tr/chinese/

II. PostShow

效果：

下载地址：http://team.eyou.com/files/ps_tango.zip

浏览测试地址：http://www.postshow.net/

III. eYou 团队

效果：

下载地址：http://team.eyou.com/files/eyou_team.zip

浏览测试地址：http://team.eyou.com

基于 Mozilla 的扩展开发 : 附录

itart — Mon, 05 Dec 2005 06:23:16 +0000

附录

I. 参考网址

基于 Mozilla 的扩展开发 : 配置项目环境

itart — Mon, 05 Dec 2005 02:55:59 +0000

第四章配置项目环境

通过上一章我们已经对扩展的结构和关键的 Chrome 有所了解，在此基础之上，本章将讲解扩展项目的配置方法。许多的扩展开发者可能都有过这样的经历：XUL 元素掌握得差不多了，可是想做一个小项目的时候却不知如何入手。作者希望通过本章节，你能了解到如何合理地配置扩展项目的开发环境。

Mozilla 平台下的项目配置和其它平台下的项目配置有些不同，其下的项目配置需要一个“螺旋式”渐进的过程。首先，我们需要先建立一个框架式扩展；然后，将其以安装方式注册到 Mozilla 下，同时对此扩展涉及到的 chrome 映射做修改；最后，我们才能真正地对项目进行开发。如果你在开发过程又中增加或修改了有关 chrome 注册的信息，你还要重复以上的过程，但那时的扩展已经不能再称为框架式扩展了，这种配置方法非常像软件开发中的“螺旋式开发模型”。由于，Firefox 的新版本与老版本在 chrome 注册方式上不同，所以相应的项目配置方法也会不相同。

4.1 建立框架式扩展

每一个做 Mozilla 扩展开发的人，他的第一个扩展几乎都是根据已有的“模板式”扩展修改而来的。而对于刚开发扩展的人来说，不依赖已有的扩展，从头实现一个自己的扩展几乎是不可能的。那么，就让我们从经典的“Hello World”扩展开始吧。

4.1.1 “Hello World” 的结构

对于一个扩展来说，如果你想让它能分别运行于高版本和低版本的 Mozilla 上，确实是一件让人很头痛的事情。我们必须将那些兼容性的文件都考虑到，特别是有关 chrome 注册的 contents.rdf 文件。下面给出它的目录结构：

helloworld/
  chrome.manifest
  install.rdf
  chrome/
    helloworld/
      content/
        contents.rdf
        overlay.js
        overlay.xul

你必须在磁盘上建立一个对应的目录结构，因为这就是你项目开发的基础，你在项目开发时的所有源代码的都将放在这里，后面将称其之为“项目目录”。

4.1.2 负责注册 Chrome 的文件

chrome.manifest 的内容如下：

overlay	chrome://browser/content/browser.xul	chrome://helloworld/content/overlay.xul
content	helloworld	jar:chrome/helloworld.jar!/content/

install.rdf 的内容如下：




  
    {241b5bc7-a8aa-44a6-a18d-3054dc6047cf}
    Hello World
    1.0
    2
    Lewis Lv
    The classical demo with "Hello, world!"
    http://kb.mozillazine.org/Getting_started_with_extension_development

    
    
      
        {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
        1.0
        1.5
      
    

    
    
      
        content/

contents.rdf 的内容如下：




  
    
  

  
  
  

  
  
    
  

  
    chrome://helloworld/content/overlay.xul

以上这 3 个文件是负责 chrome 注册的，所以提前给出。如果你在语法上还有什么不清楚的，请你参考上一章的内容。下面将结合着 browser.xul，着重介绍一下 overlay.xul 文件的内容。

4.1.3 overlay.xul

在上一章中，已经介绍过有关覆盖的内容，但是介绍得过于肤浅且没有示例。下面的一段内容摘自《Rapid Application Development with Mozilla》，原文如下：

“The overlay system is quite simple. One XUL document is the master document. This document provides a starting point for the final content. Any other XUL documents are overlays. Overlay content is merged into, or added to, the master document’s content. This happens in memory when those documents are loaded and has no effect on the original files.”

作者对上面的内容进行了意译，参考如下：

“覆盖系统十分简单，一个文档是 XUL 主文档，它提供了整个内容的入口点；另一个是文档是 XUL 覆盖文档，它描述了覆盖到主文档中的内容。当这些文档被装载时，覆盖内容会被合并或者加入到主文档的内容中。但以上的这一过程只发生在内存中，所以不会影响到原始的物理文件。”

从上面这段内容中，不难反应出一个问题。Mozilla 之所以扩展性很好，是因为它在设计之初就考虑到了如何应对扩展的问题。那些扩展程序在物理上，分别对自己的“覆盖”信息进行管理，互不影响；可一旦运行起来，却都被集成到 Mozilla 上，像一个程序一样协作运行。很显然，这就是 Mozilla 把自己做为一个平台，以此来对外提供接口的途径。下面，让我们看一下“Hello World”的 overlay.xul 实现。