1 首先说明这不是FireFox的plugin,是Extension。
plugin是调用firefox的c++代码来实现在page中显示某些特定mime type的内容,比如applet,flash,pdf。
Extension是firefox提供的一种机制,可以按照它的xul(xml的一种)来定义UI,并且配合js来完成action,配合css来完成样式,比如firefox的界面就有对应的xul文件。
2 然后展示一下扩展的目录组织
我将这个helloworld放到了firefox默认的扩展目录中C:\Program Files\Mozilla Firefox\extensions\helloworld
其中的helloworld目录。
helloworld:.
│ chrome.manifest
│ helloworld@mozilla.doslash.org
│ install.rdf
│ readme.txt
│
├─skin
│ overlay.css
│
├─locale
│ └─en-US
│ hello.dtd
│ overlay.dtd
│
└─content
hello.xul
overlay.js
overlay.xul
3 我们按照安装并运行的过程,一步步来看各个目录结构是如何联系起来的。
安装这个插件时候,先将helloworld@mozilla.doslash.org文件拷贝到
C:\Documents and Settings\Administrator\Application Data\Mozilla\Firefox\Profiles\uj9i6thi.default\extensions
然后将这个文件中的内容改为:helloworld目录所在的路径,这里即:C:\Program Files\Mozilla Firefox\extensions\helloworld(最后面后面不要有空格)
4 restart browser
5 在工具->hello world就会显示一个窗口。
具体运行机理:
一。首先firefox读到helloworld@mozilla.doslash.org(名字是这个插件的id,避免重复而已)会查看里面的目录,然后跳到那个目录下去,就是上面我列出来的目录树,第一次时候因为插件还没有安装,firefox会先读install.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>helloworld@mozilla.doslash.org</em:id>
<em:name>Hello World extension for Firefox</em:name>
<em:version>1.0</em:version>
<em:description>Demo extension.</em:description>
<em:creator>Nickolay Ponomarev</em:creator>
<!-- optional items -->
<em:contributor>A person who helped you</em:contributor>
<em:contributor>Another one</em:contributor>
<em:homepageURL>http://kb.mozillazine.org/Getting_started_with_extension_development</em:homepageURL>
<!--em:optionsURL>chrome://sampleext/content/settings.xul</em:optionsURL>
<em:aboutURL>chrome://sampleext/content/about.xul</em:aboutURL>
<em:iconURL>chrome://sampleext/skin/mainicon.png</em:iconURL>
<em:updateURL>http://sampleextension.mozdev.org/update.rdf</em:updateURL-->
<!-- Firefox -->
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>3.6</em:minVersion>
<em:maxVersion>4.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
浏览器会读出:这个插件的name,version,desc,creator和这个插件针对的浏览器版本minVersion(最低版本)和maxVersion(最高版本)
二 然后浏览器会继续去读chrome.manifest文件:
content helloworld content/
overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
locale helloworld en-US locale/en-US/
skin helloworld classic/1.0 skin/
style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css
content代表我的内容都在哪?helloworld是这个插件的名字,overlay代表布局,代表把后面uri的布局,集成到前面uri中。前面uri代表浏览器的布局,将这个uri在在url框中访问一下就知道了。
local本地化时候会去访问local/en-US/
style代表会将后面的样式集成到Toobar.xul中。
三 然后浏览器会将overlay进行集成,就会去读overlay.xul:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://helloworld/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/overlay.dtd">
<overlay id="helloworld-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/>
<menupopup id="menu_ToolsPopup">
<menuitem id="helloworld-hello" label="&helloworld;"
oncommand="HelloWorld.onMenuItemCommand(event);"/>
</menupopup>
</overlay>
顺便读了overlay.js:
var HelloWorld = {
onMenuItemCommand: function() {
window.open("chrome://helloworld/content/hello.xul", "", "chrome");
}
};
当点击helloworld时候,调用HelloWorld.onMenuItemCommand();
会打开新窗口,并显示chrome://helloworld/content/hello.xul中的内容:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://helloworld/locale/hello.dtd">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&title.label;">
<hbox align="center">
<description flex="1">&separate.label;</description>
<button label="&close.label;" oncommand="close();"/>
</hbox>
</window>
这样显示就结束了。
以后写更复杂的程序的话,难度主要在这么多乱七八糟的标签,因为控件会特别多。不过大体思路就是这个样子的,不过html换成了xul。语法稍稍变化,要是真正的做开发的话,在公司里有程序的项目的话,可以很快的上手的,其实就可以直接看手册或已有的扩展。