我的玻璃盒子

【原创】我的Firefox插件开发之旅(3)——我的第一个扩展

(原创作品,转载请注明链接)

简单知道了XUL,迫不及待地想立即编写一个插件,哪怕什么事情都不做也好。O(∩_∩)O

通过这个页面https://developer.mozilla.org/en/Building_an_Extension,可以找到编写一个插件必须要做得一些事情,写的很清楚。最后产生的目录和文件结构是这个样子:
install.rdf
chrome.manifest
chrome
  |--content
      |--overlay.xul (我准备在这里编写代码,在FF的工具栏上添加一个按钮)
  |--locale
      |--en-US
          |--sample.dtd
      |--zh-CN
          |--sample.dtd
      |--zh-TW
          |--sample.dtd
  |--skin
      |--classic
          |--sampleicon.png
          |--smallicon.png
          |--default.css (界面显示的样式表,今后可能会用到)


上面文件中的install.rdf、chrome.manifest基本上用例子中的就好了,dtd文件里面是界面文字,这个可以模仿其他插件编写。
overlay.xul我准备添加一段代码,用来在FF工具栏上添加一个按钮。skin下面的png是准备在工具栏上添加的按钮的图标。

OK,把上面整个目录用zip打个包,改后缀名为xpi,拖放到FF3中,提示尚未验证作者、是否继续安装。这个先不管它,以后再研究。安装以后,重启FF3,哈哈,写的第一个Extension成功安装了!只不过overlay.xul里面什么都没写,所以还没有视觉上的成就感。下面开始添加overlay.xul中的代码。

怎么在工具栏上添加按钮呢?感谢Mozilla提供的文档,专门有一篇文章是讲这个地:https://developer.mozilla.org/en/Creating_toolbar_buttons。文章里面讲的非常清楚,我这里就不废话了。不过有两点需要注意一下:
1、样式表中的ID和toolbarbutton的id一定要保持一致;
2、按钮的label和tooltiptext可以直接添加文字,但如果使用了中文,有可能会显示乱码(至少在我的FF3上是这样);
3、按钮的图标一定要大小两种(24x24、16x16)都提供;
4、label和tooltiptext可以使用dtd中定义的文字,但必须注意:dtd文件必须存为UTF-8编码,否则会导致按钮显示不出来!

在FF3的定制工具栏中,有图标,但下方没有文字,好像是我哪里忘记添加文字了,一会儿看看去……

好了,我的第一个FF插件就写好了,不过现在只是在工具栏上添加了一个按钮而已,什么事情都没做,下一次我们添加一些行为给它。

以下附上几个关键文件的内容:

一、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>{859606AC-AFFE-4691-82C5-FA0148A7E2D4}</em:id>
        <em:version>1.0</em:version>
        <em:type>2</em:type>
        <em:name>MeetMePlus</em:name>
        <em:description>Anywhere, anytime to starting a conferencing</em:description>
        <em:creator>G-NET</em:creator>
        <em:iconURL>chrome://meetmeplus/skin/gnet_32.png</em:iconURL>
        <em:homepageURL>http://www.meetmeplus.com/</em:homepageURL>
        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>1.5</em:minVersion>
                <em:maxVersion>3.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>
    </Description>     
</RDF>

二、chrome.manifest

overlay    chrome://browser/content/browser.xul    chrome://meetmeplus/content/overlay.xul
content    meetmeplus    chrome/content/
style    chrome://global/content/customizeToolbar.xul    chrome://meetmeplus/skin/default.css
skin    meetmeplus    classic/1.0    chrome/skin/classic/
locale    meetmeplus    zh-CN    chrome/locale/zh-CN/

三、overlay.xul

<?xml version="1.0"?>
<!DOCTYPE overlay SYSTEM "chrome://meetmeplus/locale/overlay.dtd">
<?xml-stylesheet href="chrome://meetmeplus/skin/default.css" type="text/css"?>

<overlay id="mmp-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <!-- Firefox toolbar -->
    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="meetmeplus-button" type="menu-button"
            class="toolbarbutton-1 chromeclass-toolbar-additional">
            <menupopup>
                <menuitem label="&mmp.gotohome;" tooltiptext="&mmp.gotohome.tooltip;" image="chrome://meetmeplus/skin/option_16.png" class="menuitem-iconic"/>
                <menuseparator/>
                <menuitem label="&mmp.option;" tooltiptext="&mmp.option.tooltip;" image="chrome://meetmeplus/skin/option_16.png" class="menuitem-iconic"/>
            </menupopup>
        </toolbarbutton>
    </toolbarpalette>
</overlay>

四、overlay.dtd

<!ENTITY mmp.gotohome "访问G-NET MeetMePlus">
<!ENTITY mmp.gotohome.tooltip "访问G-NET MeetMePlus网站">
<!ENTITY mmp.option "选项">
<!ENTITY mmp.option.tooltip "自定义G-NET MeetMePlus的工作方式">

posted on 2008-11-08 00:55 深蓝色系统 阅读(13919) 评论(5)  编辑 收藏 引用 所属分类: Firefox开发

评论

# re: 【原创】我的Firefox插件开发之旅(3)&mdash;&mdash;我的第一个扩展 2009-09-21 16:13 433

看了你的,等于没看,好多东西衔接不上
希望你以后能说的清楚些  回复  更多评论   

# re: 【原创】我的Firefox插件开发之旅(3)&mdash;&mdash;我的第一个扩展 2010-04-09 19:20 你是白痴

你的内容看了等于白看,全是让看帮助  回复  更多评论   

# re: 【原创】我的Firefox插件开发之旅(3)&mdash;&mdash;我的第一个扩展 2010-04-30 17:22 firefox007

作者太懒了。  回复  更多评论   

# re: 【原创】我的Firefox插件开发之旅(3)&mdash;&mdash;我的第一个扩展 2010-12-08 18:34 plaris

是楼上的太懒了,哈哈。  回复  更多评论   

# re: 【原创 2014-06-25 19:10 dfs

sdf  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理


导航

<2014年6月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

统计

常用链接

留言簿(75)

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜