编写FireFox的Extension Hello World程序小结

最新推荐文章于 2019-02-22 10:09:05 发布

原创最新推荐文章于 2019-02-22 10:09:05 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#firefox #extension #mozilla #chrome #浏览器 #applet

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

Browser

3 篇文章

订阅专栏

本文深入解析了Firefox扩展的目录组织结构及其安装、运行过程，从helloworld插件为例，详细阐述了各目录的功能及交互流程，包括安装、重启浏览器、使用插件的完整步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。语法稍稍变化，要是真正的做开发的话，在公司里有程序的项目的话，可以很快的上手的，其实就可以直接看手册或已有的扩展。