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

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

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

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

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

这个，估计最近刚刚冒出来的Jetpack会简化一点，但是看了介绍，依然觉得隔行如隔山。

https://addons.mozilla.org/en-US/firefox/addon/12025

mdc上的Firefox Extension Development解释的很清楚啊，静下心来看懂就好

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

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

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

加油哈,我是太懒,不想去看文档,XUL就是一大堆文档,还是光写JS简单
好像没有可视化的IDE,不然就方便了

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

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

随便找个扩展就是了,官方网站上不都是开源的么
扩展配置一般存放在about:config(prefs.js)里
默认配置放在扩展的default里,安装时自动载入到prefs.js
https://developer.mozilla.org/en/Buildi ... ults_Files

读写配置嘛,先初始化一个服务

PS=
 Components.classes['@mozilla.org/preferences-service;1']
 .getService(Components.interfaces.nsIPrefBranch);

然后读 var temp=PS.getBoolPref("配置项名称");
写就用setBoolPref("配置项名称",true);
其它的函数在
https://developer.mozilla.org/en/nsIPrefBranch

nsIPrefBranch2接口是监视配置变化的,比如about:config改了配置,然后界面上该打勾的打勾~
这个我用的不多,不熟,要用再看文档,哈

非常感谢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而导致操作失败。


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

我想是这样滴
在hello.js里的document表示hello.xul这个东西,是不是定义了一个新window?
而你的my-panel是在overlay.xul里的,应该是应用到主界面,所以取不到
试下
window.parent.contentDocument.getElementById('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的字体颜色。

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

汗....这位童鞋一直在自问自答耶....可怜的小盆友.....

加油啊.........