如何开发一个简单的扩展（Hello World）

Firefox其开源的性质得到了广大爱好者的大力支持。现在的Firefox扩展可谓是应有尽有精彩纷呈，我们每天都在用着扩展，然而我们一些人可能不知道扩展是怎样做成的。怀着探索的精神以及求知的欲望，我相信很多人都很想知道扩展是怎样做成的，并且都希望自己也能动手来做一个扩展，无论界面多么丑陋，也无论功能多么简单，只要是自己动手做出来的，总能收获一种充实，感到一份喜悦。然而俗话说万事开头难，只有首先冲破入门的束缚，之后方能走进开发和研究征途。

可不可以从一个简单的扩展出发，就实现一个hello world扩展。
扩展名：
helloworld
功能如下：
在工具菜单中添加一个“hello world"的选项，鼠标点击之后弹出一个窗口，里面显示一张图片，图片的下面显示文字“hello world"。

就这么简单，但是对于从来没有开发经验的人来讲，实现起来也许并不简单。
我在网上找到很多开发扩展的资料，看起来觉得不难，可实现起来总会有一些莫名的错误发生。

Firefox的发展也正需要不断地补充新鲜的血液方能更加威武，希望有开发扩展经验的朋友们能够畅所欲言，知而无不言，让我们大家一起分享创作过程的那种彭湃激情。

非常感谢楼上提供的信息，经过一天的学习有了不少的收获：
1、初步了解了Firefox的工作原理，FireFox的界面是由一系列的xml格式的xul文件定义的，所以调用里面的一些接口就可以自己开发一些比较简单的扩展；
2、亲手配置开发环境，并创作了一个别人认为不是扩展但是自己却蔽帚自珍的XPI文件：在任务栏添加一个面板显示“Hello World", 当然也可以把“Hello World"改成自己的名字，或者爱人的名字（不知道你把爱人的名字刻在你生命中最重要的浏览器上，你爱人看到了会是如何反应，后果应该很严重吧？）。

呵呵，接下来希望能够继续努力，实现上面讲到的两个扩展功能，然后不断深入下去，最后整理出一份比较通俗易懂的资料放到论坛共享。

再次谢谢各位前辈提供的资料，希望大家能够把更多的学习资料放上来，一起学习和研究，希望能够集合各种资料，群策群力，从而一起走进Firefox开发的大门中去。。。

请问有谁知道Firefox扩展中的数据是如何存和取的，比如在某扩展的对话框里面的一个编辑框（TextBox)填写了一个名字”张三’，然后关机重启后，打开FirefoX原来的那个扩展的对话框，里面的编辑框仍然显示“张三”，也就是上次填的。如果改成“李四‘，下次就显示”李四“。听起来觉得很简单，但是里面实现的原理是怎样的，以前在WINDOWS下面搞程序开发，一般是将数据保存在一文本文件里面，下次要显示时再去读取，可是Firefox扩展里面并没有相关文本文件，我查了一些资料，资料提示用nsIPrefService, nsIPrefBranch and nsIPrefBranch2这些，但是相关的源码说明很少，我实践起来经常遇到错误。

希望有过开发扩展经验的前辈们提点一下,给些扩展源码，或者整个扩展都行,要尽量简单的。。跪谢。。。

非常感谢Cye3s，这个问题终于完美解决。

我发现是我在JS里面初始化变量的时候犯了迷糊

Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("remember");
这句是对的，只不过我对JS不熟悉，导致开发起firefox扩展一直磕磕碰碰的，不知道有没有什么软件可以在开发过程当中调试FF扩展。。。

HelloWorld的功能已经实现，准备在HelloWorld的基础上开发一个名字为Remember的扩展:
Remember  your  lover, remember  your dream, remember everything impartant you want to remember...

 欢迎大家一起来参与呀，我是菜鸟，什么都不懂，再次感谢楼上的帮助。

关于document.getElementById的问题，

文件一：overlay.xul

<?xml version="1.0"?>
<overlay id="sample"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

 <statusbar id="status-bar">
  <statusbarpanel id="my-panel" label="Hello, World"/>
 </statusbar>

 <script src="overlay.js"/>

</overlay>

文件二：overlay.js

文件三：hello.xul

文件四：hello.js

问题是：在文件三hello.xul中执行某个命令，调用文件四hello.js里面的一个函数onChangeStatusBarText()，想在文件四：hello.js的onChangeStatusBarText()函数里面执行 document.getElementById('my-panel').label=‘myname'，可是为什么会得不到my-panel而导致操作失败。


这个问题折磨了好几天几夜了，跪求答案。。。

呵呵，确实如你说的那样。

my-panel是在overlay.xul定义而不是在hello.xul中定义，所以在hello.xul里面本身就没有my-panel，其调用的hello.js当然就获取不到my-panel。

hello.xul的对话框，是由overlay.xul调用overlay.js打开的，在网上查了一下，可以在hello.xul调用的hello.js中用 window.opener.document.getElementById('my-panel')获得overlay.xul定义的my-panel。

window.opener顾名思义，就是打开了本窗口的父窗口。。。。。

解决了。。。。

 

关于textbox控件大小无法随窗口改变而改变的问题

文件一：overlay.xul

文件二：overlay.js

文件三：setting.xul

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

<dialog id="myDialog" title="My Dialog"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="onInitialDialog();"
        buttons="accept,cancel"
        buttonlabelaccept="Set Favorite"
        buttonaccesskeyaccept="S"
        ondialogaccept="return onSave();"
        buttonlabelcancel="Cancel"
        buttonaccesskeycancel="n"
        ondialogcancel="return onCancel();">
        
<script src="setting.js"/>
<script type="application/x-javascript" src="common.js" />
 
 <dialogheader title="my dialog" description="example dialog"/>
  
 <vbox flex="1"> 

    <groupbox align="start"  flex="1" >
      <caption label="your information"/>
          <hbox  flex="1">
              <label control="your-fname" value="enter your name:"  flex="1"  />
                 <spacer flex="1"/>
              <textbox id="somethingtoremember"  flex="1" />
          </hbox> 
    </groupbox>

  <groupbox flex="1">
    <caption label="select favorite color"/>
    <radiogroup>
      <radio id="black" label="black"/>
      <radio id="red" selected="true" label="red"/>
      <radio id="blue" label="blue"/>
      <radio id="green" label="green"/>
    </radiogroup>
  </groupbox>

  </vbox>

</dialog>

文件四：setting.js

文件五：common.js

问题是：
在文件二overlay.js中执行下面这条代码：
 window.openDialog("chrome://helloworld/content/setting.xul", "", "chrome,dailog,modal,centerscreen,resizable");
调用了文件三setting.xul对话框，可是当把对话框的宽度拉长时， <textbox id="name"  flex="1" />编辑框name大小还不变，不会拉长。MDC的文档不是说，flex="1"就可以让控件大小随对话框的改变而改变大小么，为什么这里不行？不知道问题出现在哪里，怎样才能实现让编辑框name随对话框的大小改变而改变大小呢。

这个问题又困扰了我整整一个下午，已经参照过一些扩展源码可还是不行，按照这样慢的开发速度，不知道什么时候才可以整理出一份比较满意的入门资料，再次跪求高手指点。[/code]

从刚才搞到现在才搞定，汗！！！！

把
<groupbox align="start"  flex="1" >
      <caption label="your information"/>
          <hbox  flex="1">
              <label control="your-fname" value="enter your name:"  flex="1"  />
                 <spacer flex="1"/>
              <textbox id="somethingtoremember"  flex="1" />
          </hbox>
    </groupbox>
中的align="start"这一句去掉就可以了.

真是莫名其妙！！！

关于statusbarpanel字体颜色的问题

文件一：overlay.xul

<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World"/>
</statusbar>

<script src="overlay.js"/>

</overlay>

文件二：overlay.js

文件三：setting.xul

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

<dialog id="myDialog" title="My Dialog"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="onInitialDialog();"
        buttons="accept,cancel"
        buttonlabelaccept="Set Favorite"
        buttonaccesskeyaccept="S"
        ondialogaccept="return onSave();"
        buttonlabelcancel="Cancel"
        buttonaccesskeycancel="n"
        ondialogcancel="return onCancel();">
        
<script src="setting.js"/>
<script type="application/x-javascript" src="common.js" />
 
 <dialogheader title="my dialog" description="example dialog"/>
  
  <groupbox flex="1">
    <caption label="select favorite color"/>
    <radiogroup>
      <radio id="black" label="black"/>
      <radio id="red" selected="true" label="red"/>
      <radio id="blue" label="blue"/>
      <radio id="green" label="green"/>
    </radiogroup>
  </groupbox>

</dialog>

文件四：setting.js

文件五：common.js

问题是：在setting.xul弹出的对话框中，单选black，red，blue，green任一个后点击确定，也就是调用setting.js的onSave()，然后onSave()函数要怎样实现，才能改变overlay.xul中状态栏中my-panel的字体颜色。


现在知道可以在.css文件里面为my-panel添加几个属性，不同的属性给予不同的颜色。但是不知道在XUL和js中要如何实现改变my-panel的字体颜色。

知道的赐教一下，谢谢~~

虽然今天是情人节，但是搞不定这个问题就不出去！！！

彩虹总是在风雨过后才见到的，痛苦当中。。。。。救命呀。。。。。。。

现在还没搞定，以前用C++开发程序，很多参考书，可现在开发扩展根本就没什么参考书，。。。。。。。。。。。。。。
哪位高手出来指点一下呀，哇哈哈，又是一个通宵。。。。。。。。。。。

http://www.w3school.com.cn/

这个网站很不错，以前经常去。。。

关于statusbarpanel字体颜色的问题(续集）

感谢各位火狐前辈之前的指导。

我实践了一下，用document.getElementById("ID").setAttribute("style", "color:green");
或者MyPanel.style.color = Color; 这两种方式都可以成功更改状态栏上的字体颜色。

但我想将字体属性如字体颜色，字体大小，字体字形这些都交给CSS文件设置，而不在JS文件里面进行设置，只在JS文件里面根据CSS的设置来调用调整就行，可以体现出体系结构：XUL专干主窗口；CSS专干属性设置；JS专干事件处理。而且方便以后修改：主窗口找XUL文件，属性设置找CSS文件，事件处理找JS文件。

文件一：overlay.xul

<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World"/>
</statusbar>

<script src="overlay.js"/>

</overlay>

文件二：overlay.js

文件三：setting.xul

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

<dialog id="myDialog" title="My Dialog"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="onInitialDialog();"
        buttons="accept,cancel"
        buttonlabelaccept="Set Favorite"
        buttonaccesskeyaccept="S"
        ondialogaccept="return onSave();"
        buttonlabelcancel="Cancel"
        buttonaccesskeycancel="n"
        ondialogcancel="return onCancel();">
        
<script src="setting.js"/>
<script type="application/x-javascript" src="common.js" />
 
 <dialogheader title="my dialog" description="example dialog"/>
  
  <groupbox flex="1">
    <caption label="select favorite color"/>
    <radiogroup>
      <radio id="black" label="black"/>
      <radio id="red" selected="true" label="red"/>
      <radio id="blue" label="blue"/>
      <radio id="green" label="green"/>
    </radiogroup>
  </groupbox>

</dialog>

文件四：setting.js

文件五：common.js

文件六：overlay.css

#my-panel[mode="black"] {
  color: black !important;
  font-weight:bold !important;
}

#my-panel[mode="red"] {
  color: red !important;
  font-family:Arial, "宋体", Tahoma, "Times NEW Roman" !important;

}


#my-panel[mode="blue"] {
  color: blue !important;
}

#my-panel[mode="green"] {
  color: green  !important;
  font-size:15  !important;
}

问题是：在setting.xul弹出的对话框中，单选black，red，blue，green任一个后点击确定，也就是调用setting.js的onSave()，然后onSave()函数要怎样实现，才能改变overlay.xul中状态栏中my-panel的字体按照CSS文件中#my-panel的属性mode的值来显示。。。


各位前辈再赐教一下，不胜感激~~

MyPanel.style.color = Color;改成MyPanel.setAttribute("mode", Color);还是不行

之前用window.opener.document.getElementById('my-panel').setAttribute("style", "color:green");可以改变颜色,但这是一种不好的编码方式。

但是现在用window.opener.document.getElementById('my-panel').setAttribute("mode", "green")也不行，好生奇怪，不知道哪里错了。。。。

这是我的chrome.manifest文件（在最后一行有添加哟——！）

content helloworld chrome/helloworld/content/
locale helloworld en-US chrome/helloworld/locale/en-US/
locale  helloworld  zh-CN   chrome/helloworld/locale/zh-CN/
skin helloworld classic/1.0 chrome/helloworld/skin/

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

大侠，我是不是添加得不对？？？