学习C＋＋

Firefox扩展开发参考资料

2007-07-31T02:08:00.000-07:00

入门网址：

http://kb.mozillazine.org/Extension_development

http://developer.mozilla.org/en/docs/Building_an_Extension

http://blog.csdn.net/nickcen/archive/2006/07/17/933552.aspx

http://developer.mozilla.org/en/docs/XPCOM

可用源码：

http://fireftp.mozdev.org/developers.html

http://doudehou.googlepages.com/statusbarex-sourcecode

海阔天空，做什么就记什么。主要是 Ubuntu Linux 和 Latex 及编程相关的东东： http://www.pkblogs.com/hai-kuo/

2007-07-31

Writing an Extension for Firefox

2007-07-31T01:52:00.001-07:00

Writing an Extension for Firefox

One of the best things about Firefox and Thunderbird is that they have a well defined extension mechanism. If there's some feature you feel is completely missing, you can go ahead and add it. It's relatively easy to do ― you don't have to fiddle about with a C compiler because extensions are mostly written in a combination of XML and ECMAScript.

I've recently been getting up to speed with the mechanics of writing an extension for Firefox and Thunderbird. I thought it might be a good idea to share what I'm learning in my blog. Hopefully the information might be useful to others trying to learn how to write Mozilla extensions. In this blog, I'll take a look at installing a really simple extension into Firefox that adds a "Hello World" menu item to the Tools menu.

It doesn't do anything useful yet, but over subsequent blogs, I'll introduce more advanced and useful techniques.

Creating contents.rdf

contents.rdf is a Resource Description Framework (RDF) file that describes the contents of an extension. RDF is an XML grammar that provides a data model that can be easily processed by an application. You don't need to know much about RDF to write simple extensions, but if you're interested, you can get more information at the W3C.

To get started, create a directory called content. As its name suggests, this will contain the main content of your extension. contents.rdf should live inside this directory. You should end up with a directory structure something like this:

c:\myextensions\  +- helloworld     +- content        +- contents.rdf

Here's the code for contents.rdf.

<?xml version="1.0"?>  <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"           xmlns:chrome="http://www.mozilla.org/rdf/chrome#">   		       <RDF:Seq about="urn:mozilla:package:root">      <RDF:li resource="urn:mozilla:package:helloworld"/>    </RDF:Seq>        <RDF:Description about="urn:mozilla:package:helloworld"      chrome:displayName="Hello World"      chrome:author="Brian Duff"      chrome:authorURL="http://modev.dubh.org/helloworld"      chrome:name="helloworld"      chrome:extension="true"      chrome:description="A simple demonstration firefox extension.">    </RDF:Description>       <RDF:Seq about="urn:mozilla:overlays">      <RDF:li resource="chrome://browser/content/browser.xul"/>    </RDF:Seq>          <RDF:Seq about="chrome://browser/content/browser.xul">      <RDF:li>chrome://helloworld/content/helloworld-Overlay.xul</RDF:li>    </RDF:Seq>    </RDF:RDF>

The important parts of the file (and the parts that would usually change for each extension) have been highlighted in bold. First, we provide a package for our extension. This just distinguishes it from other extensions. For our simple extension, we choose the package helloworld:

<RDF:Seq about="urn:mozilla:package:root">    <RDF:li resource="urn:mozilla:package:helloworld"/>  </RDF:Seq>

Next, we provide a description of our extension:

<RDF:Description about="urn:mozilla:package:helloworld"    chrome:displayName="Hello World"    chrome:author="Brian Duff"    chrome:authorURL="http://modev.dubh.org/helloworld"    chrome:name="helloworld"    chrome:extension="true"    chrome:description="A simple demonstration firefox extension.">  </RDF:Description>

Next, we tell mozilla which parts of the product we want to extend. All of the user interface elements of Firefox and Thunderbird are described in a user interface definition language called XUL. Collectively, these user interface components are known as "chrome". You can extend most of the user visible parts of the two products. In this case, we want to extend the main browser interface of Firefox, defined in chrome://browser/content/browser.xul. Here's how:

<RDF:Seq about="urn:mozilla:overlays">    <RDF:li resource="chrome://browser/content/browser.xul"/>  </RDF:Seq>

Now we've described what we want to extend, we have to provide a XUL file that actually installs our custom user interface into the browser window. We will define this later in a separate XML file called helloworld-Overlay.xul. We must tell mozilla where this file is and what it extends:

<RDF:Seq about="chrome://browser/content/browser.xul">    <RDF:li>chrome://helloworld/content/helloworld-Overlay.xul</RDF:li>  </RDF:Seq>

We've completed the first step of creating an extension. The next task is to describe the user interface elements we want to install into the main window.

Overlaying User Interface Elements

XUL is the XML User interface Language. XUL provides a mechanism called dynamic overlays that allows you to modify the user interface elements of a window or control without having to modify the original XUL files. This way, the definition of extension user interface is de-coupled from the XUL files used to define the main interface elements in Firefox and Thunderbird.

We start of by creating helloworld-Overlay.xul. This should live in the same directory as contents.rdf.

<?xml version="1.0"?>    <overlay id="helloworldOverlay"     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">      <menupopup id="menu_ToolsPopup">      <menuitem label="Hello World" position="1" />    </menupopup>    </overlay>

This simple overlay installs a "Hello World" menu item at the top of the Tools menu. Our menu item is defined inside a menupopup element. In XUL, a menupopup represents a container of menu items, for example a popup menu or the drop down of a main menu. Here, we put our item inside a menupopup with the id menu_ToolsPopup. This id, menu_ToolsPopup, is a predefined in browser.xul and corresponds to the drop down part of the Tools menu.

Creating an Install Manifest

Recent versions of Firefox and Thunderbird have a new extension manager which can be used to easily install and manage extensions. To tell this extension manager about your extension, you must write another RDF file called install.rdf. This file should be at the same level in the directory tree as the contents directory, i.e. you should have a structure like this:

c:\myextensions\  +- helloworld     +- install.rdf     +- content        +- contents.rdf        +- helloworld-Overlay.xul

Here's the code for the install manifest with the interesting parts highlighted:

<?xml version="1.0"?>    <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"     xmlns:em="http://www.mozilla.org/2004/em-rdf#">      <Description about="urn:mozilla:install-manifest">        <em:name>Hello World</em:name>      <em:id>{12a1584b-2123-473d-8752-e82e74e3cb1b}</em:id>      <em:version>0.1</em:version>        <em:targetApplication>        <Description>          <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>          <em:minVersion>0.9</em:minVersion>          <em:maxVersion>1.0</em:maxVersion>        </Description>      </em:targetApplication>         <em:file>        <Description about="urn:mozilla:extension:file:helloworld.jar">          <em:package>content/</em:package>        </Description>      </em:file>      </Description>    </RDF>

First, we provide a description of the extension. This information will be displayed in Firefox's extension manager:

<em:name>Hello World</em:name>  <em:id>{12a1584b-2123-473d-8752-e82e74e3cb1b}</em:id>  <em:version>0.1</em:version>

The content of the em:id element is a globally unique identifier (GUID). This is used to distinguish your extension from every other extension. When writing your own extensions, you should aways generate a new GUID for each distinct extension you write. Andy Hoskinson provides a GUID generator web service you can use for this.

Next, we describe which application we are extending:

<em:targetApplication>    <Description>      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>      <em:minVersion>0.9</em:minVersion>      <em:maxVersion>1.0</em:maxVersion>    </Description>  </em:targetApplication>

Each extensible application released by Mozilla has its own GUID: you must specify the correct one here for the application you are extending. In this example, we're using the GUID for Firefox. We also describe the minimum and maximum versions of Firefox this extension will work with.

Finally, we tell the extension manager which files to install. Later, I'll describe how we package the extension up so that it can be automatically installed into Firefox:

<em:file>    <Description about="urn:mozilla:extension:file:helloworld.jar">      <em:package>content/</em:package>    </Description>  </em:file>

Packaging an Extension Installer

Our extension is now complete. But to make it easy for users to install the extension, we should package it up in such a way that Firefox can install it easily. To do this, we bundle our files up into an XPI (Cross platform installer) file. An XPI file is just a normal zip file with files organized in a special way. Our XPI file should contain the following structure:

helloworld.xpi  +- install.rdf  +- chrome/     +- helloworld.jar

helloworld.jar is another zip file containing all the files we created in the content directory:

helloworld.jar    +- content/       +- contents.rdf       +- helloworld-Overlay.xul

You can easily use this information to create helloworld.xpi using your favorite zip tool. Alternatively, you can use a build utility like Ant to assemble the files correctly. Here's an example Ant buildfile I used:

<?xml version="1.0"?>    <project name="helloworld" default="createxpi">      <target name="createjar">      <zip destfile="helloworld.jar" basedir="."            includes="content/**" />    </target>      <target name="createxpi" depends="createjar">      <zip destfile="helloworld.xpi">        <zipfileset dir="." includes="helloworld.jar"                     prefix="chrome" />  	   <zipfileset dir="." includes="install.rdf" />  	 </zip>    </target>  							   </project>

If you create this buildfile named build.xml and place it at the same level as install.rdf, you will be able to just run ant in this directory to generate your .xpi. Once you have an .xpi file, it can be easily installed using File->Open... in Firefox.

Download the source code (24KB ZIP file).

2007-07-31

Firefox扩展开发

2007-07-31T01:49:00.001-07:00

Firefox扩展开发之一

         最近主要做Firefox插件的开发，决定把每天的工作情况写下来，希望对其他有需要的同人有所帮助了。
         要搞这个冬冬最起码要掌握以下几门技术，XUL用来开发界面的，JavaScript用来做事件处理的，CSS用来做样式单的，DOM用来操作节点的，原本打算也研究一下XPCOM的，但是老板说时间紧，任务重，所以就先把这个pass过去了。这几样技术单独看虽然都不是很复杂，但是绞和在一起真是可以把人折磨死。
        先说JavaScript吧，这个东西一开始看也没觉着什么，类定义的不多，所以没什么库需要学的，但实际开发的时候，才发现类定义少了会更郁闷，想用个什么都要自己动手，实在是类，然后变量引用，名字空间，运行上下文，prototype chain，一堆东西把人搞到云里雾里的。之前搞Java那套，放在这还真不太适用，感觉要重头再来一样，挫折啊，郁闷啊。有的时候为了省事，想拿别人的库来用吧，才发现AJAX不但带旺了互联网，还搞红了JavaScript，一堆框架prototype，dojo...让你学的不亦乐乎。

Firefox扩展开发之二

开发插件实在是很痛苦的一件事情，因为他需要用到Firefox的chrome系统，而每次更新了代码之后，都需要重新载入chrome才能起作用。一般情况下要重启chrome就需要重新启动firefox，还好有人已经发现这种痛苦，所以开发了一个Extension Developer Manager，里面提供了好几个工具，用的最多的是reload chrome，用来在不重启firefox的情况下，重新载入chrome，第二个是javascript shell，他可以访问任意一个当前的firefox窗口。而要完成插件开发，一般还要用到Console，因为很多调试信息都需要通过这看，如果没这玩意，那估计每次都得用alert了。至于DOM Inspector一般用不上，因为如果你要象greesemonkey那样，获取当前页面的HTML DOM的话，一般都只能通过事件来实现，然后hack到她的appcontent里面，这东西在DOM Inspector里面没有，所以，你通过这种方式修改了DOM树，通过DOM Inspector是看不出来的，而为了验证你有没有修改成功，现在我的方法就是靠javascript shell。
关于DOM，我搞了足足两天，才算搞出个所以然来，由于firefox是用XUL写的，而XUL也定义了DOM，所以，一般情况下你在扩展里头，或者 javascript shell里面通过document获取的仅仅是XUL的DOM，要获取browser里面的DOM，我现在探索出来的有两种，一种是 greesemonkey那样，用事件，每次都监察DOMContentLoad事件，这个方法很危险，例如如果一个网页他有多个frame，那么这个事件就会发生多次，而由于greesemonkey只是在加载的时候用user script对DOM做一次处理，所以这个问题不是特别大。不过，如果我要做的是能够多次操作DOM树，所以，就必须要得到当前窗口的当前正在显示的 DOM，为了获取这冬冬，我足足用了2天，google了所有能想到的关键词，把XUL planet和MDC上面的文章都翻了个遍，最后终于在moznet的irc上面问到人了，原来要得到这东西根本不需要用事件，只要通过 content.document就可以得到了。实在不容易啊。

Firefox扩展开发之三－－javascript lib

javasript是灵活的，但是在原始的javascript上裸开发的好像比较少，一般大家都会选择某个库进行。js方面的lib，一开始比较有名的应该是prototype，网上关于这个的介绍和讨论也很多，但是现在好像大家用这个的也比较少了，因为prototype大量的修改了javascript的基础类，所以对javascipt的名字空间的污染比较大，很容易发生名字空间方面的冲突。后续的lib大都吸取了这方面的教训，一般把自己的方法和类定义在一个单一的名字空间下，不过这样带来的另外一个问题是，这些 lib更多时候象一个toolkit，当需要某些功能时，就调用这些toolkit中的功能类，因此，面向对象的特性不太明显。
对于这些lib，现在我用的比较多的是dojo，因为他提供了比较类似于java的语法，所以，用起来比较顺手。不过用在extension里面开发时也会遇到一些问题，因为dojo在设计的时候是针对html的dom的，但是扩展使用的是xul的dom，虽然两者之间有很多的相似之处，但是毕竟不太一样，因此要把dojo引入扩展当中，还需要对dojo的源代码进行修改。

--

海阔天空，做什么就记什么。主要是 Ubuntu Linux 和 Latex 及编程相关的东东： http://hai-kuo.blogspot.com/

劲爆 150 万同时在线，众人追捧梦幻西游

开发你的第一个Firefox扩展

2007-07-31T01:39:00.001-07:00

开发你的第一个Firefox扩展

刘文懋

Why Firefox？

如果有人问我为什么用Firefox[1]，首先毫无疑问的是它代表了开放和自由的精神，其次嘛，我会说是它的可扩展性。

Firefox最激动人心的特点就是它提供了开放的接口，你可以使用这些接口来做各种应用，完成各种各样的功能。你应该不曾给IE添点什么吧，微软不见得这么大方能告诉你什么有用的东西。他最慷慨的事就是给你一个COM组件，记得我对IE的最高级的应用，就是在一次网络大作业中，把整个IE嵌在我的程序里，仅此而已。而Firefox则不同了，当你看到了Fireftp就知道我在说什么了。

请合上你的下巴，这没有什么值得惊讶的。这就是Firefox，中间那个cool的ftp工具只是它的一个扩展（Extesion）而已。

想做一个这样的东东吗？我不会告诉你到底有多难，因为这不是我开发的，有兴趣的话你可以自己试一试，网址是http://fireftp.mozdev.org/ 。

类似的扩展还有很多，你可以到mozilla的扩展库去看看，据官方统计，到2005年11月9日，（忘了告诉你了，2004年11月9日是Firefox的诞生日，也就是说它还只是一个小baby），用户至少可以使用700个扩展（Extension）或者附件（Add-on）。可见Firefox的扩展发展是多么的迅速！

以前我在99%的时间内使用Firefox，另外1%的时间使用IE浏览一些不遵从W3C标准而非用IE不可的垃圾网站，我们学校的BBS很不幸地成为其中一员。但是现在我在100%的时间内使用Firefox，这归功于一个ie tab[2]的Firefox扩展。所幸随着网络标准的日渐被重视，Firefox有可能会支持所有的网站。 :)

好了，说了这么多Firefox扩展的好处，是不是有点心动了呢？那么就用一个Hello World来开始我们的第一个Firefox扩展吧。别说我太不in了，毕竟hello world总是最容易让我们使所有编程语言的开场白，不是吗？

Here we go！

认识Firefox的扩展

Firefox扩展的功能

从功能来说，Firefox扩展应该是用户和浏览器内核交互的一种体系结构。扩展可以满足用户一些特定的需要，实现特定的功能。开发者可以使用内核提供的一些用户接口，编写自己的实现代码，完成自己设想的功能。

Firefox扩展的格式

从开发的角度来讲，Firefox的扩展是一个文件目录的集合，它们按照一定格式和规范编写和排布的。最终，发布给用户的是一个xpi包。别感到奇怪，这个xpi文件和那些jar[3]的文件一样，都是zip格式的压缩文件。所以这下你懂了吧，把你做完的文件按照zip格式压缩一下就成了我们的扩展包了。

那么究竟具体的xpi文件中是什么情景的？解开我提供的helloworld.xpi文件包，你会发现文件目录的排布如下所示。其中树型结构的叶子部分都是文件，其他的中间结点都是目录。

HelloWorld.xpi

│

├─chrome

│ ├─content

│ │ ├─ contents.rdf

│ │ ├─ helloworld-Overlay.xul

│ │ └─ hello.js

│ │

│ ├─locale

│ │ ├─ en-US

│ │ │ ├ contents.rdf

│ │ │ └ helloworld.dtd

│ │ │

│ │ └─ zh-CN

│ │ ├ contents.rdf

│ │ └ helloworld.dtd

│ │

│ └─skin

│ ├─ qq_small.png

│ ├─ qq_big.png

│ ├─ helloworld.css

│ └─ contents.rdf

│

├─ build.xml

├─ install.rdf

└─ chrome.manifest

通常，Firefox的扩展在根目录中，会有install.rdf文件，这个文件说明了扩展的基本信息，例如扩展的ID、作者、版本等信息。在Firefox1.5之前的版本，该文件还会包含扩展的文件分布信息，在Firefox1.5至后，这些信息都移到了chrome.manifest文件中。在调试的时候，build.xml可以帮助我们自动打包，这个文件对那些在xpi文件中还含有jar文件的扩展特别有用。

根目录下，总是会存在一个chrome目录。chrome下面的格式就不一定了，但是基本都会含有content、locale和skin三个目录。其中，

content目录是用来存放扩展的程序文件和控件格式的资源文件；

locale目录存放不同语言版本，用于扩展的本地化和国际化；

skin目录存放图片等资源文件。

扩展的格式并不一定要拘泥一格，但具体情况需要与install.rdf或chrome.manifest文件中的信息联系。记住，无论如何，良好的习惯总是对你有好处的：请把相应的文件放到它们应该放的地方。

扩展的基本内容

install.rdf

install.rdf是一个扩展的身份证。这么说并不为过，请看下面就是我们helloworld的install.rdf文件：

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<em:name>Hello World</em:name>

<em:id>{12a1584b-2123-473d-8752-e82e74e3cb11}</em:id>

<em:version>0.4</em:version>

<em:type>2</em:type>

<em:description>A test extension</em:description>

<em:creator>Marvel</em:creator>

<em:contributor>LiuWenmao</em:contributor>

<em:homepageURL>http://marvel.hit.edu.cn/</em:homepageURL>

<em:targetApplication>

<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

<em:minVersion>0.9</em:minVersion>

<em:maxVersion>1.5</em:maxVersion>

</Description>

</em:targetApplication>

</Description>

</RDF>

可以看得出，这是一个xml格式的文件。根节点为RDF。命名空间为http://www.w3.org/1999/02/22-rdf-syntax-ns# ，前缀为em[4]。下面介绍每一个元素和属性的意义：

<em:name>Hello World</em:name>

<em:id>{12a1584b-2123-473d-8752-e82e74e3cb11}</em:id>

<em:version>0.4</em:version>

<em:type>2</em:type>

<em:description>A test extension</em:description>

<em:creator>Marvel</em:creator>

<em:contributor>LiuWenmao</em:contributor>

<em:homepageURL>http://marvel.hit.edu.cn/</em:homepageURL>

em:name：扩展的名字，例如我的名字叫"刘文懋"，而我的扩展叫"Hello World"。J

em:id：扩展的ID号，每一个扩展都会有一个不同的GUID，就如同你的身份证号，用于区分你的扩展与其他人的扩展，所以很明显，全球所有的Firefox插件的ID都不一样。所以，当你写自己的扩展的时候，需要获得一个全球唯一对GUID，Andy Hoskinson帮我们完成了这项工作，你可以登录 http://www.hoskinson.net/webservices/guidgeneratorclient.aspx 来获得一个GUID。点击一下Generate GUID按钮，很简单吧，但是这很重要，如果你不想惹麻烦的话！

Firefox1.5支持"User@Location"这种ID的格式。

请注意，当你在"扩展项"中查看扩展信息的时候，你能看到的只有扩展的name，ID你是看不到的，但是Firefox的确是依靠ID来工作的。正如我们在平时总是称呼各自的名字，但是等到登记信息的时候，完全是按照身份证号来区分的。Firefox也是一样的。

em:version：顾名思义，这是扩展的版本号，没什么多说的。

em:type：这是类型。Firefox的插件很强，它支持的不只扩展一种。例如：type=2时表示扩展（Extensions）， type=4时表示主题（Themes），type= 8时表示地区（Locale），这和本地化有关，type=16时表示插件（Plugin）。

em:description：扩展的描述，对扩展的简单说明。

em:creator：扩展的创建者。

em:contributor：扩展的贡献者。可以有多个em:contributor，毕竟可以有很多贡献者。

em:homepageURL：扩展的主页。

以上几项，除了ID之外，都会出现在Firefox的"工具"-〉"扩展"项的扩展列表的各项摘要中。

好，让我们到下一部分：

<em:targetApplication>

<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

<em:minVersion>0.9</em:minVersion>

<em:maxVersion>1.5</em:maxVersion>

</Description>

</em:targetApplication>

em:targetApplication：本扩展可以被使用的应用程序，它的字节点是对这个应用程序的说明，我们的Hello world仅在Firefox下运行，所以只有一个em:targetApplication节点，如果你认为你开发的扩展可以在mozilla的其它应用程序中运行的话，可以在这里多写几个em:targetApplication。

em:id：em:targetApplication的ID号，正如Firefox的扩展有自己的ID号一样，Mozilla的每一个应用程序也都有自己的ID号。例如Firefox、Thunderbird等等，他们都需要有自己的ID号来进行标识。例如，本扩展使用的Firefox的ID号是{ec8030f7-c20a-464f-9b0e-13a3a9e97384}。

em:minVersion：扩展支持的应用程序的最低版本号，举个例子，Firefox1.5有很多的功能是FF1.0.7使用不了的，或者FF1.0.7的一些功能已不被FF1.5支持了，这样的话，每一个扩展都应该有一个Firefox的适用的版本的范围。最大值和最小值的意义也在于此。

em:maxVersion：说明同上，假设这个值为1.0+，那么你会发现Firefox1.5会自动将其禁用，解决方法是你可以将这个值手动改为1.5，前提是这个扩展可以在Firefox1.5下正常运行。

有一些支持Firefox旧版本的扩展还会有下列的东东：

<em:file>

<em:package>content/</em:package>

<em:skin>skin/</em:skin>

<em:locale>locale/zh-CN/</em:locale>

<em:locale>locale/zh-TW/</em:locale>

<em:locale>locale/en-US/</em:locale>

</Description>

</em:file>

这段东西是像Firefox说明了扩展的目录分布。Firefox1.5已经不使用这部分了，对应的，将这部分的内容转移到了chrome.manifest文件中，只有当chrome.manifest文件中没有相应的目录分布的时候，才会回来找。

如Firefox扩展的格式所说，扩展包是由content、skin、locale三部分组成的。这段就说明了这三部分的分布情况，具体的对应内容参见下部分chrome.manifest。

需要注意的是，上面每一个节点中的值都是以"/"结尾的，如果漏掉了这个东西，Firefox就会找不到对应得目录！

理解Chrome[5]

在分析chrome.manifest文件之前，我们必须理解Chrome这个概念。作为Firefox，它的底层是使用了高效并且不能被修改的运行时引擎（runtime engine），在此之上是比较"厚"的可读可修改的解释层。

Chrome代表了Firefox提供的所有用户接口——XUL、CSS、JavaScript、图像、 RDF、文本和HTML文档。RDF和XUL是最重要的文档。

从物理层面上说，Chrome是Firefox数据库中的数据。Firefox需要获得扩展的信息，所以它会在启动的时候，读入RDF文件，完成对扩展的注册，将扩展的信息存放到Firefox的内存数据库中。所以一个扩展只有在Firefox的扩展搜索范围中，并且被Firefox注册了，它才能称为Chrome。

在逻辑层面上说，Chome是一组URL的集合。正如你可以使用http://www.google.com 来访问Google的网页一样，你可以chrome://URL 的方式来访问Chrome的资源。事实上，这是一种映射关系。例如你的电脑中根目录下存放有一个扩展，其中有一个xul文件：/tests/content/package.xul，你可以在浏览器中的地址栏中输入：file:///tests/content/ package.xul ，这样你就可以查看该文件了，但是在Chrome中，如果你已经将conten目录注册了，那么你同样可以在地址栏中输入chrome://test/content/package.xul，这样就可以浏览这个文件了。所以从这个角度来说Chrome可以看作一种Firefox自己定义的协议，不是吗？

说道Chrome，不得不说一下Jar文件。Firefox支持将Chrome的内容全部放在一个zip格式的文件中，这个文件的后缀名为.jar。这个文件可以包括窗口内容、皮肤主题、本地化代码，以及前三个的任意组合。

至于jar文件中内容的引用有所不同。例如有一个/test/hello.jar中还有一个helloworld.xul文件，那么该文件引用地址应该为：

jar:file:///tmp/example.jar!/example.txt。

请注意jar后面有一个感叹号。特别注意的是jar文件的目录分布。

例如正常没有压缩的目录排布为：

test/content/…

test/locale/…

test/skin/…

但是如果要将其压缩为jar文件，那么需要将其重新排列为：

/content/test

/locale /test

/skin /test

这种设计的一个合理解释是Firefox可以在运行的时候更快地搜索该压缩文件。

chrome.manifest

这个文件是Firefox1.5引入的，用于对一些扩展内容、结构的说明和映射。我的Hello World的chrome.manifest文件内如如下：

content helloworld chrome/content/

locale helloworld en-US chrome/locale/en-US/

locale helloworld zh-CN chrome/locale/zh-CN/

skin helloworld classic/1.0 chrome/skin/

overlay chrome://browser/content/browser.xul chrome://helloworld/content/helloworld-Overlay.xul

style   chrome://global/content/customizeToolbar.xul  chrome://helloworld/skin/helloworld.css

先看前四行：

content helloworld chrome/content/

locale helloworld en-US chrome/locale/en-US/

locale helloworld zh-CN chrome/locale/zh-CN/

skin helloworld classic/1.0 chrome/skin/

根据上一节的叙述，这四行是为了让Firefox在启动的时候，将本地的目录注册到Chrome的数据库中。

我们的Hello world扩展包中包含的内容有content、locale、skin三个部分。其中locale包含了美式英语和简体中文的文件，所以一共有四项。

Content的格式为：

content     Name    Location

其中，

content：chrome包中的类型，这里为content

Name：chrome包的名字

Location：chrome包文件的位置。注意最后的"/"，别忘了，否则扩展是无法加载的！

所以，第一行的意思就是：一个叫sample的chrome包，我们可以从位置chrome/content/找到它的content文件。这里的路径是相对于chrome.manifest文件的路径而言的相对路径。

类似的，下面三句定义了locale和skin的位置。

现在，我们已经将本地物理文件与Firefox逻辑上的Chrome的URL建立一个映射，例如：content-〉chrome/content/。我们的扩展有一个content.rdf文件，位置在/chrome/content下，那么我们就可以在浏览器的地址栏中输入 "chrome://helloworld/content/content.rdf"来查看该文件，事实上，Firefox也是按照这个URL来寻找该文件的。

这四行可以与上一节的em:file对照一下，它们在Firefox中实现的功能是一致的。只不过这种写法是Firefox 1.5引入的。假如你的扩展包中没有chrome.manifest而只有install.rdf文件，那么Firefox会解析install.rdf文件，之后，生成一个chrome.manifest文件。

接下来的两行：

overlay chrome://browser/content/browser.xul chrome://helloworld/content/helloworld-Overlay.xul

style chrome://global/content/customizeToolbar.xul                 chrome://helloworld/skin/helloworld.css

这两行也是向Firefox注册，但这次注册的是你需要重写控件的代码文件（customizeToolbar.xul和helloworld-Overlay.xul）和控件的样式文件（helloworld.css）。Firefox启动的时候会将helloworld-Overlay.xul 合并到browser.xul，从而实现自定义控件的加载。

这几个文件的详细内容我们在接下来的部分进行讨论。

让Firefox说"Hello World"

添加控件接下来，我们需要实现一些基本功能。首先添加一个菜单，用户点击之后，可以弹出一个"Hello World"的窗口。接下来，我们熟悉一下其他的控件，例如状态栏等。

Firefox的控件是由前台的xml格式的文件xul和后台的javascript脚本的js两部分内容组成的。前台的xul文件定义控件的外观和触发事件，后台的js文件实现具体的事件，从而实现了表现和实现的分离。

添加菜单项

首先，我们来实现菜单的菜单项。本例的效果是添加一个菜单项，如下图的"Click Me！"项：

记得上一节我们在chrome.manifest文件中将browser.xul 和helloworld-Overlay.xul注册了吗？我们使用了overlay chrome://browser/content/browser.xul chrome://helloworld/content/helloworld-Overlay.xul，从而Firefox在加载默认浏览器文件browser.xul的同时，会将helloworld-Overlay.xul也加载上去。

所以，我们需要再helloworld-Overlay.xul中加入自己的控件。好了，我写了一个简单的控件menu_Hello：

helloworld-Overlay.xul

<?xml version="1.0"?>

<overlay id="helloworldOverlay"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<menuitem id="menu_Hello" label=" Click Me! "

accesskey="C" position="1" oncommand="onShowMenu(); "/>

</menupopup>

</overlay>

下面我们来分析一下各个部分。

首先，定义了本文件唯一的ID号为"helloworldOverlay"。

接着，定义了控件触发事件的脚本文件为 chrome://helloworld/content/hello.js。

然后，我们开始定义控件。首先要找到控件的父控件——至少Firefox要知道该把它放在哪里。这里我们找到了"工具"菜单menu_ToolsPopup。至于我们怎么知道"工具"菜单的ID是menu_ToolsPopup的，我推荐使用Firefox自带的开发工具Dom Inspector，至少我是这么知道它的ID的。

找到父控件之后，我们就可以自定义控件了：

这句说明，我们的控件ID为menu_Hello，显示的文本为Click Me!，快捷键为C，位置在"工具"菜单的最上面，点击后触发的事件为onShowMenu()（onShowMenu事件在hello.js中定义，正如我们上面所说的）。

好了，定义完控件的外部属性，我们就需要处理它的触发事件了。打开chrome\content\ hello.js，输入：

function onShowMenu()

{

window.alert("hello");

}

这样我们就完成了菜单项的工作。

如果你现在就像看看效果，那么请转到"部署Firefox扩展"部分；如果你还想看看其他的控件以及样式表的使用，可以继续。

添加工具栏

接下来，我们会添加一个工具栏按钮。从这部分，我们可以知道如何使用工具栏控件，以及如何使用样式。这部分的实际效果如下图：

我们修改一下helloworld-Overlay.xul文件，添加一个叫tbarHello 的toolbarbutton，以及下拉菜单和菜单项。为了简单起见，我去掉了上一节的菜单项的部分：

helloworld-Overlay.xul

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://helloworld/skin/helloworld.css" type="text/css"?>

<!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/helloworld.dtd" >

<overlay id="helloworldOverlay"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<toolbarbutton id="tbarHello" tooltiptext="Toolbar Test"

type="menu-button" label="Test"

oncommand=" onTbarHello();">

<menuitem id="menuitem-add" label="Add"

tooltiptext=" Add your name"

oncommand="addName();"/>

<menuitem id="menuitem-remove" label=" Remove "

tooltiptext="Remove your name"

oncommand="removeName();"/>

</menupopup>

</menu>

<menuitem id="menuitem-state" label=" State "

tooltiptext=" Show your state "

oncommand="showState();"/>

</menupopup>

</toolbarbutton>

</toolbarpalette>

</toolbox>

</overlay>

下面我们来分析这段代码：

1导入控件样式：

<?xml-stylesheet href="chrome://helloworld/skin/helloworld.css" type="text/css"?>

我们需要对下面的控件进行修饰，所以需要引入css样式，这与HTTP的css类似。上面这句说明，我们可能会用到chrome://helloworld/skin/helloworld.css定义的控件样式，事实上的确如此。

2 定义控件

<navigator-toolbox>……</navigator-toolbox>就是定义控件的代码。首先我们找到navigator-toolbox节点，就是Firefox的导航栏。然后在上面添加一个按钮tbarHello，类型为menu-button，，触发事件为onTbarHello()。此外还包括了一个菜单、三个菜单项。具体的说明这里就省略了，你可以使用Dom Inspector来查看各个控件的类型和属性值。

3 定义控件样式

也许你会说，我只看到了你导入了样式文件，但是具体它是怎么使用的呢？或者说控件和它的样式是怎么管联起来的呢？

我们可以来看一看我们导入的CSS文件：

Helloworld.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#tbarHello {

list-style-image: url("chrome://helloworld/skin/qq_big.png");

}

toolbar[iconsize="small"] #tbarHello {

list-style-image: url("chrome://helloworld/skin/qq_small.png");

}

我们可以看到，这个文件定义了一个tbarHello的list-style-image属性[6]。list-style-image的一般语法是：list-style-image: url(…)|none，这个属性是用来显示特定list-item的图像的，即用后面url中的图像来显示该控件。这里我们使用的是chrome://helloworld/skin/qq_big.png。

但是仅仅有这句还是不够的。Firefox提供了两种图标的显示方法，一种是大图标，另一种是小图标。大图标默认的大小为24x24，小图标默认的大小为16x16。刚才我们定义的图标是大图标，所以我们需要定义小图标，方法为toolbar[iconsize="small"] #tbarHello{}这三行。

这样我们定义了toolbar的显示图像。当然还有其他的属性可以定义，但是这里我们只定义了它的图像。

4 实现控件功能

这部分尽管是最重要的，但是在本例这里不是重点。所以可以用最简单的方式实现xul文件中需要使用的onTbarHello、addName、removeName和showState函数。

我们的hello.js代码如下：

Hello.js

function addName()

{

window.alert("Add name");

}

function removeName()

{

window.alert("Remove name");

}

function showState()

{

window.alert("Show state");

}

function onShowMenu()

{

window.dump("hello");

window.alert("hello");

}

function onTbarHello()

{

window.alert("hello");

}

至此，我们完成了控件的样式的定义和使用。你可以加入更多的样式，完成更复杂的功能，只要你有足够的想象力。

实现本地化[7]

好了，到目前为止，Firefox可以说"Hello World"了。但问题是世界上还有十三亿中国人，那么显然"Hello World"使他们认为Firefox是一个洋玩意儿，它们可能会给Firefox起一个名字叫"洋狐狸"[8]。更糟的是，这十三亿人中很多人只认识中文，不懂得abc，那么只有英文的Firefox不会是他们的选择。

在本节中，我们讲述的是如何在Firefox中实现扩展的本地化。我们需要重写helloworld-Overlay.xul ：

helloworld-Overlay.xul

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://helloworld/skin/helloworld.css" type="text/css"?>

<!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/helloworld.dtd" >

<overlay id="helloworldOverlay"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<menuitem id="menu_Hello" label="&btn_Hello.label;"

accesskey="&btn_Hello.accesskey;" position="1" oncommand="onShowMenu(); "/>

</menuKopup>

</overlay>

注意到和第一个版本有什么不同吗？相信你已经发现了menu_Hello的label已经变成了&btn_Hello.label;，同样的accesskey也变成了这种形式。

如果你学过HTML语法，你可能会想到这可能是转义。例如，在HTML中"<"被转义成为了"<"。

对，这也是一种转义，但是略微不同的是，&btn_Hello.label;和&btn_Hello.accesskey;其实Firefox或者其他的标准都没有定义它们的含义，这是有你自己来决定的。

你需要在你导入的dtd文件中进行说明，本例中，你需要在chrome://helloworld/locale/helloworld.dtd添加相应的定义。

也许到这一步你会问，这个helloworld.dtd文件是哪一个呢？到底是chrome\locale\en-US\ helloworld.dtd 还是 chrome\locale\zh-CN helloworld.dtd呢？

其实，这是由Firefox决定的。如果你的Firefox的locale是en-US，那就是chrome\locale\en-US\ helloworld.dtd，如果你的Firefox的locale是zh-CN，那就是chrome\locale\ zh-CN \ helloworld.dtd。

你需要做的工作就是就是告诉Firefox你的en-US或zh-CN的locale文件夹在什么地方。现在你要在chrome\locale\en-US和chrome\locale\zh-CN下分别建立一个contents.rdf文件。chrome\locale\en-US下的contents.rdf如下：

contents.rdf

<?xml version="1.0" ?>

- <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

<RDF:Seq about="urn:mozilla:locale:root">

<RDF:li resource="urn:mozilla:locale:zh-CN" />

</RDF:Seq>

-

- <RDF:Description about="urn:mozilla:locale:en-US">

- <chrome:packages>

- <RDF:Seq about="urn:mozilla:locale: en-US:packages">

<RDF:li resource="urn:mozilla:locale: en-US:helloworld" />

</RDF:Seq>

</chrome:packages>

</RDF:Description>

</RDF:RDF>

chrome\locale\en-US下的contents.rdf也类似，只不过把所有的zh-CN换成en-US即可。

最后，我们要在相应的locale目录下建立不同locale的helloworld.dtd。还是以英语为例，我们新建chrome\locale\en-US\helloworld.dtd，内容如下：

helloworld.dtd(en-US)

<!ENTITY btn_Hello.label "Click Me!">

<!ENTITY btn_Hello.accesskey "C">

<!ENTITY tbarHello.label "Test">

<!ENTITY tbarHello.tip "Name test">

<!ENTITY manage.label "Manage">

<!ENTITY manage.tip "Management">

<!ENTITY add.label "Add">

<!ENTITY add.tip "Add your name">

<!ENTITY remove.label "Remove">

<!ENTITY remove.tip "Remove your name">

<!ENTITY state.label "State">

<!ENTITY state.tip "Show your state">

在本例中，当Firefox解析到helloworld-Overlay.xul文件中的"label="&btn_Hello.label;"时，并且locale为en-US，那么它就会到chrome\locale\en-US\helloworld.dtd文件中寻找相应的btn_Hello.label项，即""Click Me!"。

这样，我们就实现了动态加载控件的label，同样的，我们可以加载tip。

类似的，我们可以填写chrome\locale\zh-CN下的helloworld.dtd文件。假如系统的locale为zh-CN，那么我们的helloworld就会说中文了。

这样，当Firefox每次启动的时候，会根据系统的locale来动态的加载不同的helloworld.dtd。

部署Firefox的扩展

现在Firefox的部署方式一共有两种：

打包部署

这种方式是最普遍的，可以得到Firefox的所有版本的支持。我们可以将完成的扩展目录压缩成zip格式的文件，后缀名为.xpi。

当涉及到扩展中有jar文件的时候，打包过程会比较复杂，因为存在多次压缩的过程。为了简单起见，你可以自己编写一个build.xml，然后使用ant[9]来组装。下面就是一个文件的样例：

<?xml version="1.0"?>

<project name="helloworld" default="createxpi">

  <target name="createjar">

    <zip destfile="helloworld.jar" basedir="."

         includes="content/**" />

  </target>

  <target name="createxpi" depends="createjar">

    <zip destfile="helloworld.xpi">

      <zipfileset dir="." includes="helloworld.jar"

                  prefix="chrome" />

             <zipfileset dir="." includes="install.rdf" />

           </zip>

  </target>

</project>

安装有两种方式，你可以将这个xpi文件上传到Web服务器上，但前提是该服务器能实现application/x-xpinstall功能。另一种方法是在Firefox中选择"文件"-〉"打开文件"，选择该xpi文件即可。

直接部署

Firefox1.5支持这种部署方式。这种方式特别适合调试扩展。

你可以直接到Firefox的扩展的系统目录，一般为"%SYSTEM_DRIVER%:\Documents and Settings\%User%\Application Data\Mozilla\Firefox\Profiles\ default\extensions"。

建立一个文本文件，文件内容为你的扩展的位置。例如我的是"E:\My Documents\Visual Studio Projects\firefox\helloworld\chrome\content"，文件名为扩展的ID号，本例为{12a1584b-2123-473d-8752-e82e74e3cb11}。

保存文件后，重启Firefox即可。

无论用哪种方式，Firefox启动之后，都会加载扩展。你可以到"工具"-〉"扩展项"中查看具体的内容，信息应该与你的install.rdf内容一致。

调试Firefox的扩展

你可以在控制台中对firefox进行调试。Firefox的控制台类似于C语言的控制台，你可以将一些变量的值打印出来，或是可以打印出一些控制的信息，这些信息对你调试firefox的扩展都是十分有用的。

首先，你需要将这个功能打开，在地址栏中输入：about:config ，此时你会发现有很多firefox的配置项，怎么有点像windows的注册表呢？That's right，这就是Firefox的注册表，你可以在这里放入一些定制的值，实现特定的功能。

我们需要新建一个Boolean类型的配置项 "browser.dom.window.dump.enabled"，它的值为true。

然后，在你的Firefox的快捷方式的属性中，把"目标"项添加一个"-console"，例如我的就改为了"C:\Program Files\Mozilla Firefox\firefox.exe" –console ，这样每次Firefox启动的时候都会出现一个控制台。当然你也可以在命令行中输入上面的命令，但是你应该知道最简单的方式工作的最好，不是吗？

最后，你可以在你的程序中添加window.dump()函数。例如：

window.dump("Hello world!\n");

这样，当程序执行到这里的时候，控制台上就会出现"Hello world"的字样了。

获得Hello World的源代码

你可以从以下地址获得本的实验的Hello World代码： http://marvel.hit.edu.cn:8080/text/firefox/helloworld.xpi

贡献Firefox社区

如果你想写自己的Firefox扩展，或者想为Firefox做些东西，可以登录mozilla的开发网站：http://www.mozdev.org/ 。希望你也能成为Firefox的一名开发者。

Contact Me

本人能力有限，一定有地方讲的不正确或是不确切，欢迎来信交流。我的Email是liuwenmao@hit.edu.cn

参考文献

[1] Mozilla Developer Center, Building an Extension, 15 November 2005, http://developer.mozilla.org/en/docs/Building_an_Extension

[2] Brian Duff, Writing an Extension for Firefox , October 02, 2004, http://www.orablogs.com/duffblog/archives/000536.html

海阔天空，做什么就记什么。主要是 Ubuntu Linux 和 Latex 及编程相关的东东： http://hai-kuo.blogspot.com/

劲爆 150 万同时在线，众人追捧梦幻西游

firefox扩展开发(七) ：键盘快捷键

2007-07-30T09:32:00.003-07:00

firefox扩展开发(七) ：键盘快捷键

galeki posted @ 2007年06月24日 08:41PM in Firefox扩展开发 with tags firefox XUL 扩展开发

键盘快捷键是一个应用程序不可缺少的部分，最常见的地方在菜单栏中，在XUL中添加键盘快捷键是很简单的，只需要设置控件的accesskey属性即可：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar >
<menu id="file-menu" label="文件(F)" accesskey="f">
<menupopup id="file-popup">
<menuitem id="close-command" label="关闭(X)" accesskey= "x"/>
</menupopup >
</menu >
</menubar >
</window >

当然，accesskey属性也可以设置在其他控件上（比如按钮）。

如果要设置全局快捷键，这个时候就要用到<key>标签，每个<key>标签设置一个快捷键，最后把所有的<key>标签包含在一个<keyset>标签中即可：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<keyset >
<key id="key1" modifiers="control" key="Q" oncommand="alert('你按了快捷键crtl+Q')" />
<key id="key2" modifiers="control alt" key="C" oncommand="alert('你按了快捷键crtl+alt+C')" />
<key id="key3" keycode="VK_F6" oncommand="alert('你按了快捷键F6')"/>
</keyset >
</window >

这里介绍了设置全局快捷键的3种情况：

第9行，设置的快捷键是crtl+q，modifiers就是通常所说的修饰键，modifiers可以取control、alt、meta、shift，分别代表了键盘上的ctrl、alt、meta、shift键。

第10行，设置的快捷键是ctrl+alt+c，演示了如何设置有两个修饰键的情况，只需把他们用空格分开即可。

第11行，设置的快捷键是F6，值得注意的是，前面两行中指示快捷键的属性是key，直接指出键盘上的字母值，但是碰到像F1、F2这样的功能键，还有TAB和回车这样的按键，就没法通过key属性设置了，这个时候只有通过keycode设置，其实，键盘上的每个键都对应了一个keycode值，这个值一般以"VK_"开头，下面的表格列出了常用的keycode值，对应的按键从后缀就可以看出：

VK_CANCEL	VK_BACK	VK_TAB	VK_CLEAR
VK_RETURN	VK_ENTER	VK_SHIFT	VK_CONTROL
VK_ALT	VK_PAUSE	VK_CAPS_LOCK	VK_ESCAPE
VK_SPACE	VK_PAGE_UP	VK_PAGE_DOWN	VK_END
VK_HOME	VK_LEFT	VK_UP	VK_RIGHT
VK_DOWN	VK_PRINTSCREEN	VK_INSERT	VK_DELETE
VK_0	VK_1	VK_2	VK_3
VK_4	VK_5	VK_6	VK_7
VK_8	VK_9	VK_SEMICOLON	VK_EQUALS
VK_A	VK_B	VK_C	VK_D
VK_E	VK_F	VK_G	VK_H
VK_I	VK_J	VK_K	VK_L
VK_M	VK_N	VK_O	VK_P
VK_Q	VK_R	VK_S	VK_T
VK_U	VK_V	VK_W	VK_X
VK_Y	VK_Z	VK_NUMPAD0	VK_NUMPAD1
VK_NUMPAD2	VK_NUMPAD3	VK_NUMPAD4	VK_NUMPAD5
VK_NUMPAD6	VK_NUMPAD7	VK_NUMPAD8	VK_NUMPAD9
VK_MULTIPLY	VK_ADD	VK_SEPARATOR	VK_SUBTRACT
VK_DECIMAL	VK_DIVIDE	VK_F1	VK_F2
VK_F3	VK_F4	VK_F5	VK_F6
VK_F7	VK_F8	VK_F9	VK_F10
VK_F11	VK_F12	VK_F13	VK_F14
VK_F15	VK_F16	VK_F17	VK_F18
VK_F19	VK_F20	VK_F21	VK_F22
VK_F23	VK_F24	VK_NUM_LOCK	VK_SCROLL_LOCK
VK_COMMA	VK_PERIOD	VK_SLASH	VK_BACK_QUOTE
VK_OPEN_BRACKET	VK_BACK_SLASH	VK_CLOSE_BRACKET	VK_QUOTE
VK_HELP

显示效果：

--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

firefox扩展开发(六) ：关于event对象

2007-07-30T09:32:00.001-07:00

firefox扩展开发(六) ：关于event对象

galeki posted @ 2007年06月03日 02:50PM in Firefox扩展开发 with tags 扩展开发 event XUL firefox

firefox扩展开发(七) ：键盘快捷键

上一篇我们看到了如何用javascript驱动界面上的控件，现在我们看看在事件被触发时，如何获得更详细的信息。

每当某个事件被触发（比如控件被点击或激活、鼠标移动到控件上等等），有关这个事件的详细信息都被储存到event对象中，并可以在事件处理函数中进行查看，比如上一篇中的第二个例子，就是通过 event.target.tagName 获得被激活的控件的标签名称，event还有更多的属性，让我们看个例子：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script >
function ShowMouseXY(event){
var document_xy = "X:" + event.clientX + " Y:" + event.clientY;
var screen_xy = "X:" + event.screenX + " Y:" + event.screenY;
document.getElementById("document").value = "鼠标在文档中的位置： " + document_xy;
document.getElementById("screen").value = "鼠标在屏幕中的位置： " + screen_xy;
}
</script >
<hbox >
<label id="screen"/>
<label id="document"/>
</hbox >
<hbox width="800" height="600" onmousemove="ShowMouseXY(event);"/>
</window>

这里用到了4个event中的属性，clientX、clientY、screenX、screenY，分别是事件触发时，鼠标相对文档的xy坐标值和相对整个屏幕的xy坐标值，第21行在hbox上设置了onmousemove的事件属性，每当鼠标在这个hbox上移动，就会触发函数显示当前鼠标的位置（鼠标没有被抓下来）:

上一篇的第二个例子，我们用event.target引用了当前被激活的控件，通过事件冒泡在vbox上识别，与其相对的，还有一个event.currentTarget属性，引用的是事件冒泡最终传递给的控件：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script >
function who_am_i(event)
{
message = "我是" + event.currentTarget.tagName + "。你点击了" + event.target.tagName;
alert(message);
}
</script >
<vbox oncommand="who_am_i(event)">
<button label="OK"/>
<checkbox label="Save backup"/>
</vbox >
</window >

显示效果：

关于event更多的属性，可以参考 http://xulplanet.com/references/objref/Event.html

--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

firefox扩展开发(五) ：驱动XUL界面

2007-07-30T09:31:00.001-07:00

firefox扩展开发(五) ：驱动XUL界面

galeki posted @ 2007年06月02日 03:42PM in Firefox扩展开发 with tags firefox 扩展开发 XUL javascript

firefox扩展开发(六) ：关于event对象

前面几节，讨论了怎么用XUL创建窗口控件，这样我们就能创建出漂亮的程序界面，但是现在点击窗口中的控件，却什么也不会发生，接下来我们来看看怎样驱动界面中的控件。

大家都知道，在HTML中，同样也有简单的控件，比如按钮、单选、复选框，主要用HTML中的<input>标签来实现，HTML中是怎样驱动这些控件的呢？一般是通过诸如onclick、onfocus、onmouseover等等事件属性，通过事件驱动，再配合javascript 来完成，比如：

如上代码在HTML中创建一个普通的按钮，点击它时，弹出"我被点击了！"的对话框。

在XUL中，驱动控件的方法和HTML基本相同，并且，也是通过javascript来完成，在XUL里，最有用的事件属性是oncommand，当控件被激活时就会出发这个事件，比如按钮被点击，单选复选框被点击，菜单项被点击等等，比如：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="下面是一个普通的按钮:)"/>
<button label="普通的按钮" oncommand="alert('我被点击了！')" />
</window >

点击按钮，和HTML中一样，弹出窗口显示：

通过javascript的事件冒泡，可以在上层元素中捕获下层元素的事件信息，并进行识别处理：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox oncommand="alert(event.target.tagName + ' 被点击');">
<button label="普通的按钮"/>
<checkbox label="我是单选框"/>
</vbox >
</window >

当事件被激活，event.target中包含了被激活对象的信息，其中tagName就是对象标签的名称，可以通过它识别事件实在哪个标签（也就是控件）上被激活的。效果如下：

在XUL中，负责事件处理的javascript代码，可以像上面那样内联在xml标签中，也可以像HTML那样，从外部的js文件中引用：

button.js 文件：

function show_ok ()
{
alert( "我被点击了！");
}

在XUL文件中，用<script>标签引用外部的js文件：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="button.js" />
<label value="下面是一个普通的按钮:)"/>
<button label="普通的按钮" oncommand=" show_ok()"/>
</window >

效果和第一张图片一样。

你也可以通过熟悉的getElementById函数取得想要的对象，然后再用addEventListener函数动态的为元素添加事件处理函数，这样的好处就是完全分开了XUL和javascript，负责不同功能的两种语言不再纠缠在一起：

my_button.js 文件：

function show_ok ()
{
alert( "我被点击了！");
}
var button = document. getElementById("my_button");
button.addEventListener( 'command', show_ok, true);
/*
* 参数1为事件名称，oncommand即为command
* 参数2为事件处理函数
* 参数3为true 表示不捕捉冒泡消息
*/

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="下面是一个普通的按钮:)"/>
<button label="普通的按钮" id= "my_button"/>
<script src="my_button.js" />
</window>

效果和上面一样。

值得注意的是，首先得在XUL中指定对象的id属性，<script>标签也得在想引用的元素后面出现才可以，因为如果在前面，那时候下面的元素还没有被创建，getElementById也找不到它。

--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

firefox扩展开发(四) ：更多的窗口控件

2007-07-30T09:30:00.001-07:00

firefox扩展开发(四) ：更多的窗口控件

galeki posted @ 2007年05月21日 10:24PM in Firefox扩展开发 with tags XUL 开发扩展 firefox

firefox扩展开发(五) ：驱动XUL界面

标签盒子

标签盒子是啥？大家都见过，就是分页标签：

对应的代码：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<tabbox >
<tabs >
<tab label="第一个标签标题"/>
<tab label="第二个标签标题"/>
</tabs >
<tabpanels >
<tabpanel id="firsttab">
<label value="第一个标签的内容"/>
</tabpanel >
<tabpanel id="secondtab">
<label value="第二个标签的内容"/>
</tabpanel >
</tabpanels >
</tabbox >
</window >

每个标签盒子中的内容被包含在<tabbox>中，<tabs>下的<tab>包含标签标题，< tabpanels>下的<tabpanel>包含每个标签的内容，按顺序和标签标题<tab>对应。

iframe

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="以下为GemBlog首页…………"/>
<iframe id="content" src="http://blog.linuxgem.org " flex="1"/>
</window >

效果：

--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

firefox扩展开发(三) ：排列窗口控件

2007-07-30T09:29:00.001-07:00

firefox扩展开发(三) ：排列窗口控件

galeki posted @ 2007年05月20日 09:57PM in Firefox扩展开发 with tags XUL 开发扩展 firefox

firefox扩展开发(五) ：驱动XUL界面

上一篇我们讲到了用XUL创建基本的窗口控件（按钮、输入框、单选复选框……），现在我们来讲一下如何排列他们。

盒子：<hbox>与<vbox>

XUL中主要的布局元素成为"盒子"，分为两种，水平盒子和垂直盒子，也就是<hbox>和<vbox>，说白了就是把包含在盒子内的空间水平或者垂直排列，如果你熟悉GTK+编程的话，一定对这两种布局方式非常的熟悉。

上一篇的控件，只能按照顺序垂直分布在窗口中，因为这是窗口默认的排列控件的方式，要想改变，就要把控件放在盒子中：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox >
<hbox >
<label value="用户名:"/>
<textbox id="login"/>
</hbox >
<hbox >
<label value="密码:"/>
<textbox id="pass"/>
</hbox >
<button id="ok" label="登录" />
<button id="cancel" label="取消" />
</vbox >
</window >

和上一篇一样，把上述文件保存为test.xul，并用firefox打开。

运行得不错，不过，"密码:"旁边的输入框似乎靠的太近了些，我们可以把两个文字标签、两个输入框，分别放在两个个<vbox>中，这样就解决了对齐问题：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox >
<hbox >
<vbox >
<label value="用户名:"/>
<label value="密码:"/>
</vbox >
<vbox >
<textbox id="login"/>
<textbox id="pass"/>
</vbox >
</hbox >
<button id="ok" label="登录" />
<button id="cancel" label="取消" />
</vbox >
</window >

显示效果：

盒子内的布局

当我们把上面的窗口拖大，窗口控件还是停留在窗口的左边，留下右边一大片空白，这似乎不是我们想要的效果：

我们可以在<vbox>或<hbox>中的pack属性来控制，pack有3种值：

start：对vbox来说，是盒内全部靠上，对hbox，就是盒内全部靠左。
center：盒内居中。
end：vbox是靠下，hbox是靠右。

这里，我们还要介绍一个flex属性，默认情况下，盒子的大小是不变的，等于盒内元素的总大小，但是当flex属性为"1"时，盒子的大小是随着窗口的增大而增大，这样才能通过设置pack属性控制盒内的布局：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox >
<hbox pack="center" flex="1" >
<vbox >
<label value="用户名:"/>
<label value="密码:"/>
</vbox >
<vbox >
<textbox id="login"/>
<textbox id="pass"/>
</vbox >
</hbox >
<hbox pack="center" flex="1" >
<button id="ok" label="登录" />
<button id="cancel" label="取消" />
</hbox >
</vbox >
</window >

这样就实现了居中：

分组窗口控件

有的时候，窗口中一部分空间是相互关联的，为了表示出这种关联关系，要用到<groupbox>：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<groupbox >
<caption label="9月20日是……？"/>
<label value="植树节"/>
<label value="爱牙日"/>
<label value="中秋节"/>
<label value="元宵节"/>
</groupbox >
</window >

显示效果：

<caption>的值，就是分组标签标题的值，<caption>甚至可以包含其他的控件：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<groupbox >
<caption >
<checkbox label="Enable Backups"/>
</caption >
<hbox >
<label control="dir" value="Directory:" />
<textbox id="dir"/>
</hbox >
<checkbox label="Compress archived files"/>
</groupbox >
</window >

显示效果：

--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

firefox扩展开发(二)：用XUL创建窗口控件

2007-07-30T09:28:00.001-07:00

firefox扩展开发(二)：用XUL创建窗口控件

galeki posted @ 2007年05月20日 02:30PM in Firefox扩展开发 with tags firefox 扩展开发 XUL

firefox扩展开发(五) ：驱动XUL界面

在Firefox 中，所有的界面都是基于XUL文件描述的，XUL本身是一个XML文件。就连Firefox本身，也是基于XUL的，不信的话，可以在firefox的地址栏中敲入： chrome://browser/content/browser.xul ，看看会出现什么情况吧。

1.创建一个简单的窗口

多说无益，让我们看一个简单的XUL文件示例：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
</window >

把上述的代码保存为test.xul，然后在firefox的"文件" --> "打开文件" 中打开这个文件，就可以看到（下图）。

哎，怎么啥都没有？因为我们还没有往窗口中加入任何东西，所以除了标题栏之外，是一片空白。实际上，上面的XUL文件，是每个窗口的基本框架。

第1行是XML文件的基本表示，第2行引用渲染窗口控件的样式表文件，这里我们先跳过对这行的解释，只要知道"chrome://global/skin/" 引用的是firefox全局默认的样式表即可。

第3行的<window>元素，就是窗口的根元素，你可以把它想象成HTML中的<html>元素。属性id的值可以随便取，和HTML中的id属性相同，必须要保证全局唯一，因为之后我们要通过id来引用每个窗口。title属性就是窗口的标题，xmlns是名称空间，说明之下的内容是XUL。

窗口中所有的内容，都要放在<window>和</window>之间，就像HTML中所有的元素必须放在<html>和</html>之间一样。

2.让我们往窗口里添点东西吧

所有一般程序具有的窗口控件（按钮、单选复选框、文本输入框、下拉菜单……），在firefox的窗口中都可以实现，只不过，不同的窗口控件在XUL中变成了不同的XML标签，控件的属性（大小、文本、排列方式……）变成了标签的属性值而已。

2.1按钮

我们先来添加个按钮，打开test.xul，添加下面的代码：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="普通的按钮"/>
</window >

按钮在XUL中就是<button>这个标签，label属性为按钮上显示的文字。

2.2文字

在窗口上显示的文字，用<label>标签来显示：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="下面是一个普通的按钮:)"/>
<button label="普通的按钮"/>
</window >

2.3文本输入框

文本输入框，为<textbox>标签。让我们清除刚才添加的代码，下面的代码显示了<textbox>的几种用法。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="用户名"/>
<textbox id="username"/>
<label value="密码"/>
<textbox id="password" type="password" maxlength="10"/>
<label value="个人简介"/>
<textbox multiline="true"
value="在这里填入你的个人简介。" />
</window >

第11行，密码输入框要设置type属性为"password"；第14行，如果需要多行的输入框，需要指定multiline为"true"。

2.4单选和复选框

单选框为<radio>，复选为<checkbox>。

单选框的分组，只要把单选框标签包含在<radiogroup>中即可。看代码:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="用户名"/>
<textbox id="username"/>
<label value="密码"/>
<textbox id="password" type="password" maxlength="10"/>
<label value="你喜欢的颜色"/>
<radiogroup >
<radio id="blue" label="蓝色" />
<radio id="yellow" selected="true" label="黄色"/>
<radio id="red" label="红色" />
</radiogroup >
<checkbox label="保存我的信息"/>
<label value="个人简介"/>
<textbox multiline="true"
value="在这里填入你的个人简介。" />
</window >

2.5下拉选项

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menulist >
<menupopup >
<menuitem label="红色"/>
<menuitem label="蓝色"/>
<menuitem label="黄色" selected="true" />
</menupopup >
</menulist >
</window >

每个选项包含在<menuitem>中，<menuitem>再被包含在<menupopup>和<menulist>中。

2.6进度条

用<progressmeter>表示。进度条分为两类，一种是有明确完成进度的，一种是没有完成进度的，通过设置mode="determined"和
mode="undetermined"来实现。

看一下效果就明白了：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="test-window"
title="测试用的窗口"
xmlns=" http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<progressmeter
id="progress1"
mode="determined"
value="60%" />
<progressmeter
id="progress2"
mode="undetermined" />
</window >

至此，我们介绍了用XUL创建出一个窗口所具备的基本控件的方法，但是这些空间只能按照次序从上到下的显示，而且，每个元素将占满窗口的整个宽度，接下来，我们要看一下怎么布局窗口中众多的控件。

--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

firefox扩展开发(一) ：扩展的基本结构

2007-07-30T09:26:00.001-07:00

firefox扩展开发(一) ：扩展的基本结构

galeki posted @ 2007年05月18日 11:09PM in Firefox扩展开发 with tags extension 开发扩展 firefox

firefox扩展开发(五) ：驱动XUL界面

用过firefox的人肯定要安装firefox的扩展，这样才能发挥火狐的全部实力。一般扩展是一个后缀为.xpi的文件，其实这个文件就是zip格式的压缩包，压缩了一个扩展所需要的所有目录和文件，基本的目录结构如下：

extension.xpi:
/install.rdf
/components/*
/components/cmdline.js
/defaults/
/defaults/preferences/*.js
/plugins/*
/chrome.manifest
/chrome/icons/default/*
/chrome/
/chrome/content/

看似很复杂，让我们从最重要的文件开始介绍起：

1. install.rdf

从名字可以看出，这个文件描述了扩展安装所需要的信息，包括了扩展的标识、版本、适用的应用程序、作者等等等等。本身是一个rdf文件。

基本的install.rdf示例：

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em=" http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id >galeki@linuxge.org</em:id >
<em:version >1.0</em:version>
<em:type >2</em:type>
<em:targetApplication >
<Description >
<em:id >{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion >1.5</em:minVersion>
<em:maxVersion >2.0.0.*</em:maxVersion>
</Description >
</em:targetApplication >
<em:name >Hello</em:name>
<em:description >扩展测试</em:description>
<em:creator >galeki</em:creator>
<em:homepageURL >http://blog.linuxgem.org/galeki</em:homepageURL >
</Description >
</RDF >

8～10行是标识信息，第8行的<em:id>段是此软件包唯一的标识，可以是作者的email，目的是唯一标识此软件包。第9行是目前的版本。第10行的<em:type>，值为2代表"我是扩展"，4代表"我是主题"，这里是扩展，所以值为2。

14～20行的<em:targetApplication>段描述了软件包针对的应用程序，16行那段古怪的<em: id>表明此扩展是针对firefox的，而不是thunderbird、sunbird，所以，只要是针对firefox的扩展，此id的值都不变。17～18行描述了此扩展适用的firefox版本。

23～26行描述了扩展的基本信息，从标签的名称上就可以看出意思，扩展管理器中显示的扩展信息，就是来源于这里。

2. chrome目录

chrome是扩展最重要的一个目录，所有描述扩展的文件，称为chrome。

chrome一般包括3类文件，content、locale、skin：

content：描述扩展界面、外观的定义文件，比如按钮布局，对话框，通过XUL文件和js文件来设定，后面我们可以看到XUL的介绍。

locale：描述多语言信息的文件，一般是xml的dtd文件。

skin：定义界面样式的css文件和所需要的图片文件。

一个典型（并不绝对）的chrome目录下包含这么几个子目录：

/chrome
        content/
        locale/
        skin/

三个子文件夹存放了扩展对应的content、locale和skn类型的文件。

3.chrome.manifest文件

接下来，得让fierfox找到扩展的content、locale、skin文件在哪里，chrome.manifest就是这个作用。

这个文件让firefox知道扩展的content、locale、skin等文件在哪里，例如：

content hello chrome/content/

简单来说，就是指明，hello这个扩展的content类型文件，在chrome目录的content子目录下。

locale的定义稍有区别：

locale hello zh-CN chrome/locale/zh-CN/

指明hello这个扩展的zh-CN，也就是中文的locale，在chrome/locale/zh-CN/目录下。

skin的定义和locale相似：

skin hello classic/1.0 chrome/skin/classv1/

指明hello这个扩展，名叫classic/1.0的skin，在chrome/skin/classv1/目录下。

通过chrome.manifest文件的指定，firefox就可以找到对应的文件。在firefox中，引用web服务器上的文件是用的 "http://"前缀，引用硬盘上的文件是用的"file://"前缀，引用扩展中的文件有单独的引用前缀，就是"chrome://"，比如：

chrome://hello/content/about.xul

引用了hello扩展content类型文件中的about.xul文件。这样一来，不管在硬盘上扩展的content、locale、skin是在什么地方，只要chrome.manifest文件配置好，就可以让firefox通过"chrome://"引用到特定的文件了。

FireFTP的例子：

由上图的地址栏可以看出，打开FireFTP这个扩展，实际上就是打开了fireftp的content类型文件中的fireftp.xul文件。

--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

abBars代码解读之——Visual Studio的自动化接口

2007-07-11T03:22:00.001-07:00

Microsoft的Visual Studio开发工具为软件开发人员提供了强大的功能，通过集成开发环境(IDE)的构建平台提供的菜单和工具条，开发人员可以生成项目，编写代码，调试直到最终生成应用程序。除此之外，Visual Studio还提供了一套完整的自动化对象，通过操作这些自动化对象提供的方法，开发人员在不使用菜单和工具条的情况下也能够完成诸如打开文件、激活窗口或改变窗口大小等操作。Visual Studio提供了两种方法让用户控制集成开发环境和它的自动化组件对象，一种是使用宏（Macros），另一种是使用内置插件（Add-ins）。本文主要是介绍内置插件（Add-ins）方面的内容。
每一个自动化对象都代表了集成开发环境的一个构件或相关的一组构件。例如Document代表一个打开的文档，而Documents对象则代表所有打开的文档，同样，一个Window对象代表一个打开的窗口，Windows对象代表所有打开的窗口。使用内置插件可以在脱离IDE的情况下打开一个项目。修改项目中的文件甚至重新Build这个项目。使用内置插件还可以向IDE添加实用的命令，在工具条上创建按钮，扩展IDE的功能。
IDSAddIn接口是Visual Studio定义的插件接口，Visual Studio只是定义了这个接口，一个内置插件就是一个IDSAddIn接口的实现，也就是说，一个内置插件就是一个COM对象，它至少应该实现一个 IDSAddIn接口。使用VC的Add-ins向导生成的内置插件代码核心就是一个CDSAddIn类：

class CDSAddIn : public IDSAddIn,
public CComObjectRoot,public CComCoClass<CDSAddIn, &CLSID_DSAddIn<

IDSAddIn接口其实只有两个方法，分别是：

IDSAddIn::OnConnection 插件被装载
IDSAddIn::OnDisconnection 插件被卸载

插件工作的过程是这样的，当IDE启动一个插件时，就按照IDSAddIn接口的约定调用插件的coclass实现的OnConnection，并传递一个Application参数给插件，插件的OnConnection就完成插件的初始化。并通过这个 Application对象查询IDE支持的其他自动化对象，通过这些对象完成特定的任务。一个内置插件典型的任务就是向系统的Commands对象注册一个命令并在工具条上创建一个按钮。当系统要卸载一个内置插件时就会调用相应的OnDisconnection，插件应该利用这个机会释放已经申请的系统资源，从系统的Commands对象中注销已经注册的命令，同时删除添加在工具条上的按钮。从这个过程可以看出，虽然插件的加载和释放都是被动进行的，但是通过实现自定义的OnConnection和OnDisconnection接口函数，插件可以完成自己定制的初始化和销毁任务，这很像是COM事件的回调过程，从接口函数的名字也可以看出一些倪端，接口函数的名字都是以"On"开头，这通常是COM体系中事件接口的声明方式。图（1）表示了内置插件、IDSAddIn接口和实现类之间的关系：

图1. 插件组件、IDSAddIn接口和实现类之间的关系

Visual Studio的IDE通过IDSAddIn::OnConnection接口函数将一个很重要的参数传递给插件，这个参数就是一个Application 对象。Application对象对应的是整个Visual Studio IDE 的实例，简单点讲，可以理解为一个Application就是一个打开的VC集成开发环境。Application对象是整个Visual Studio内置组件的核心组件，通过Application对象可以查询整个Visual Studio IDE的所有内置对象，并通过这些内置对象控制Visual Studio。以下代码演示了在不打开VC的IDE的情况下打开一个VC的工作区并执行Rebuild All命令编译这个工作区的所有项目：

//伪代码，不可直接编译
#import "....\devshl.dll"

IApplicationPtr pApp;
pApp.CreateObject(_T("MSDEV.Application"));
if(pApp != NULL)
{
pApp-<RebuildAll();
}

内置插件通过IDSAddIn::OnConnection接口函数接口函数获得一个当前集成开发环境的Application对象，插件随后的所有工作都是围绕着这个Application对象进行的，CDSAddIn负责保存这个Application对象。Visual Studio的内置COM对象接口是一个比较复杂的接口模型，图（2）就是这些内置接口的关系图：

图2. Visual Studio的内置COM对象接口关系图

下面就以TabBars的自动添加格式化函数说明功能的部分代码为例，演示如何通过Application对象实现在当前文档中插入文字内容：

CComPtr<IDispatch< pDispDoc;
CComQIPtr<ITextDocument, &IID_ITextDocument< pDoc;
//m_pApplication是CDSAddIn保存的一个Application对象
m_pApplication-<get_ActiveDocument(&pDispDoc);
pDoc = pDispDoc; //隐式的接口查询
pDispDoc = NULL; //Release it

if(pDoc)
{
  CComPtr<IDispatch< pDispSel;
  CComQIPtr<ITextSelection, &IID_ITextSelection< pSel;
  CComBSTR bstr;
  CString strText;

  pDoc-<get_Selection(&pDispSel);
  pSel = pDispSel; // 查询ITextSelection对象
  pDispSel = NULL;
  hr = pSel-<get_Text(&bstr); //得到当前选择的文字
  if(SUCCEEDED(hr))
  {
    strText = bstr;
    strText.Replace(_T("\t"),_T(" ")); //将\t替换成空格
    bstr = strText;
    pSel-<put_Text(bstr);//写入document
  }
}

了解了Visual Studio的自动化接口以及如何使用这些接口之后，就可以大致了解TabBars是如何工作的，随后的代码解读将重点介绍每个TabBars的功能是如何实现的，并结合这些功能讲解Visual Studio内置COM对象接口的用法。

您认为本文应该得打印| 收藏|讨论|投诉82d92805-ed71-4d84-b341-446d5e7ca2ad

网名oRbIt，1996年开始编程，1999年创建星轨工作室(Orbit Studio)，创作了Source Insight外挂插件"TabSiPlus"、"Winmsg消息精灵"、"TabBar Addin for VC"和"aClock 桌面时钟"等软件。目前在中兴通讯股份有限公司上海研发中心工作，从事以太网光接入产品（EPON&GPON）的开发与研究工作。

作者其他文章：更多

--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

操作QQWary.dat数据文件的类

2007-07-11T03:20:00.001-07:00

操作QQWary.dat数据文件的类

摘要：QQwry是目前使用很广泛的IP地址数据库，本文研究了QQwry数据文件的格式，编写了一个读取数据文件，查询IP地址信息的类，并附带完整的演示例子的VC代码。

关键字：IP地址查询，QQwry

2002年末的时候，我想给我的一个软件添加ip地址查询功能，当时很多QQ版本都支持显示ip地址信息，记得这种功能最早有一个名为"追捕"的软件就实现了，不过QQ使用的是一种新的ip地址数据库组织格式，相对于老的文本格式的数据文件，新的数据文件格式更加紧凑，查询效率更高。经过一番研究之后，我决定在我的程序中实现这个功能，于是我给cnss发了封邮件，希望得到QQwry.dat文件的格式，但是没有答复（汗~~~~）。没办法，只好来硬的（Don't warry，我没有采用暴力威胁、寄邮包炸弹等恐怖方式），于是拿出IDAPro，咔咔咔，几十秒钟之后ipsearch.dll的汇编代码就出现在我的眼前。直接找CreateFile的调用，果然只有一处针对QQway.dat的调用，剩下的就是分析代码了...此处省去若干汉字和英文字符以及空格、标点符号......

新的QQwry数据库使用32位的internet IP地址代替了点分形式的IP地址（字符串），文件的前半部分存放IP地址区间，所有的IP地址划分成从大到小的区间（地址段），所有的地址描述信息在文件的后半部分。查找的过程就是按照区间从大到小的区间确定过程，关于QQwry数据文件的格式我分析地并不彻底，也就是很多地方只知道那样使用却不知道为什么。分析反汇编出来的代码并不是容易的事（因为我很菜嘛），我当时只是根据汇编代码的流程用C++重写了查询代码。演示代码中IpSearch工程中的 GetDispString函数就是直接从汇编代码翻译出来的，可以看到很多变量名都是IDAPro分析出来的内存地址或寄存器名。代码看起来很丑陋，但是用起来还不错，支持当前所有版本的QQwry.dat（废话，人家格式没变嘛）。不过后来发生的事情让我很吐血，因为2004年的时候我从网上看到了下面两篇Blog：

http://blog.csdn.net/taft 《QQwry格式》
http://blog.csdn.net/cnss 《关于QQWry格式》

如果你想更多的了解QQwry文件的格式就可以看看这两篇Blog。

后来研究生毕业了，我将软件的代码卖给了别人，整个软件模块设计的很不错，只是那个GetDispString函数让我觉得拿不出手，于是花了点时间将其改写了，并封装成一个适用于Windows平台的类，也就是Win32工程中的CIpInfo类，这个类的使用非常简单：

CIpInfo info;
if(info.LoadInfoFile(_T("..\\DataFile\\QQwry.dat")))
{
TCHAR szBuf[128];
info.GetIpInfo(_T(" 202.114.6.45"),szBuf,128);
::MessageBox(::GetFocus(),szBuf,_T("IpInfo class"),MB_OK);
}

希望这些代码对大家有用。

下载代码 http://blog.csdn.net/images/blog_csdn_net/orbit/qqwry.zip
--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

学习C＋＋

Firefox扩展开发参考资料

Writing an Extension for Firefox

Writing an Extension for Firefox

Creating contents.rdf

Overlaying User Interface Elements

Creating an Install Manifest

Packaging an Extension Installer

Firefox扩展开发

开发你的第一个Firefox扩展

Why Firefox？

认识Firefox的扩展

Firefox扩展的功能

Firefox扩展的格式

扩展的基本内容

install.rdf

理解Chrome[5]

chrome.manifest

让Firefox说"Hello World"

添加菜单项

添加工具栏

实现本地化[7]

部署Firefox的扩展

打包部署

直接部署

调试Firefox的扩展

获得Hello World的源代码

贡献Firefox社区

Contact Me

参考文献

firefox扩展开发(七) ： 键盘快捷键

firefox扩展开发(七) ： 键盘快捷键

firefox扩展开发(六) ： 关于event对象

firefox扩展开发(六) ： 关于event对象

firefox扩展开发(五) ： 驱动XUL界面

firefox扩展开发(五) ： 驱动XUL界面

firefox扩展开发(四) ： 更多的窗口控件

firefox扩展开发(四) ： 更多的窗口控件

标签盒子

iframe

firefox扩展开发(三) ： 排列窗口控件

firefox扩展开发(三) ： 排列窗口控件

盒子：<hbox>与<vbox>

盒子内的布局

分组窗口控件

firefox扩展开发(二)：用XUL创建窗口控件

firefox扩展开发(二)：用XUL创建窗口控件

1.创建一个简单的窗口

2.让我们往窗口里添点东西吧

2.1按钮

2.2文字

2.3文本输入框

2.4单选和复选框

2.5下拉选项

2.6进度条

firefox扩展开发(一) ： 扩展的基本结构

firefox扩展开发(一) ： 扩展的基本结构

abBars代码解读之——Visual Studio的自动化接口

作者其他文章： 更多

操作QQWary.dat数据文件的类

firefox扩展开发(七) ：键盘快捷键

firefox扩展开发(七) ：键盘快捷键

firefox扩展开发(六) ：关于event对象

firefox扩展开发(六) ：关于event对象

firefox扩展开发(五) ：驱动XUL界面

firefox扩展开发(五) ：驱动XUL界面

firefox扩展开发(四) ：更多的窗口控件

firefox扩展开发(四) ：更多的窗口控件

firefox扩展开发(三) ：排列窗口控件

firefox扩展开发(三) ：排列窗口控件

firefox扩展开发(一) ：扩展的基本结构

firefox扩展开发(一) ：扩展的基本结构

作者其他文章：更多