IT技术博客大学习 共学习 共进步

记开发firefox extension

never-online 2010-05-28 13:07:30 浏览 3,444 次
很久很久没有更新blog的技术文章了,正好最近这阵子花了点时间做firefox插件,发现、总结了一些问题记录并分享一下。

关于调试
开启你的extension log功能。
打开about:config,通过filter找到:extensions.logging.enabled,将其设置为true。
它将使你的extension调试更方便。
安装一个mr tech toolkit插件,可以在附加组件内容,选中某个插件右键,直接到插件目录。

关于xul布局
xul就不说了,语法比较简单,也支持CSS,不清楚的话还可以看参考手册,只是制作插件时需要不停的重启firefox。
所以有个可视化编辑xul,又不需要重启firefox的工具是很重要的,可以下载xul explorer
布局里值得说的一点是,vbox、hbox、spacer,这两个元素是XUL布局里重要的组成部分。
  • 简单的说就是用vbox包起来的元素,子节点里的所有元素就是垂直的。
  • hbox类似,子节点所有都是横向排列。
  • spacer就是填入空白(当然,如果你不用它,直接用CSS布局也可)。
了解这几个以后,基本你可以手写XUL代码了,当然心里也基本知道布局是什么样的了。

鼠标右键菜单
知道这些之后,如果你要写一个右键菜单。例如:
 
  <popup id="contentAreaContextMenu">
    <menuseparator />
    <menuitem id="kb-context-menu" label="右键菜单" oncommand="nsNamespace.method();" image="chrome://kb/content/new.png"/>
  </popup>
 
popup的ID一定要是contentAreaContextMenu,否则你的右键菜单(contextmenu)死活是出不来滴。(如果不清楚这条,相信你会不停的去看是不是自己的脚本出问题了)
另外,我原来想偷懒,想在xul里嵌一个iframe解决所有问题,但貌似嵌入进去后里面的textarea无法使用,完全被disabled掉了,所以后来放弃使用iframe。老老实实的用xul的textbox来做UI。

不一致性的奇怪现象
如果要给某个元素加css text-decoration:underline下划线,文本必须在attribute里才能加上,例如<label value="test" style="text-decoration:underline">就正常出现下划线,而如果你要是<label style="text-decoration:underline">test</label>则无效。
而text元素又恰与上描述相反,看demo吧。
 
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="mycss.css" type="text/css"?>
<window title="test01.xul" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <groupbox>
 <caption label="Underline problem"/>
 <label style="color: red;text-decoration: underline">Text as element content: underline doesn't work.</label>
 <label style="color: red;text-decoration: underline" value="Text as an element attibute: underline works!"/>
 </groupbox>

 <groupbox>
 <caption label="Blink problem"/>
 <label style="color: red;text-decoration: blink">Text as element content: blink works!</label>
 <label style="color: red;text-decoration: blink" value="Text as an element attribute: blink doesn't work."/>
 </groupbox>
</window>

值得copy的一些代码
读取、存储用户配置信息
 
//从conf里读取存储的信息
var prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch).getBranch("extensions.pluginname.");
var username = prefs.getCharPref('username')||'';
var password = prefs.getCharPref('password')||'';

//存储用户信息到config
var prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref("username", user.value); //以字符串形式存储
prefs.setCharPref("password", pass.value); //以字符串形式存储

在新tab里打开一个URL
 
var openUrl = function(url) {
  var wnd = window.top.getBrowser().selectedBrowser.contentWindow;
  wnd.open(url);
};
openUrl('http://www.never-online.net');

关于打包发布,及自动更新
extension更新有大概三种方式:
  • 到addon上官方注册,这个对于个人来说不用去想什么了,没什么可操作性。――略过。
  • 更新协议用https,然后到CA买证书,不知道CA的同学点这里――要银子。
  • 可以用http协议,第一次打包时将install.rdf安装文件签名,每次更新包时,用该签名来生成update.rdf文件,然后用sha1算法保证XPI安装包的正确性。――靠谱。
在windows里,打包你需要用到两个工具,一个mcCoy,一个sha1sum.exe,说下两个的用途:
  • mcCoy,一个mozilla develop网上推荐的签名工具。可以点这里下载,如上所述,是用来签名你的XPI安装包的。
  • sha1sum.exe,一个命令行下的执行文件,用sha1算法来算XPI安装包的程序(注意,命令行下有效)。点这里下载
签名发布xpi安装包 及 更新插件流程
  • mcCoy创建一个新key。
  • 点击install按钮找到install.rdf,使之签名。如果你的install.rdf格式正确,mcCoy程序会自动将该文件写入签名。
    如果不知道写install.rdf格式的同学看文末,我会给出template。
    (注意:如果该文件格式不对,或损坏,firefox安装时会提示该文件有误的)。
  • 签名好install.rdf之后,就可以发布了,但发布之前提醒最好先测试一下自动更新的过程是否有问题。
  • 接下来用sha1sum.exe来算你要更新的XPI更新包,算好之后,把值放到em:updateHash属性里。
  • 最后,就要用现在这个key去签名你的update.rdf文件。即点击sign按钮找到update.rdf文件进行签名。
    这个步骤和签install.rdf一样,如果你的update.rdf文件格式无误,mcCoy也会自动将update.rdf文件写入签名。
    如果不知道写update.rdf格式的同学看文末,我会给出template。
    需要注意的是:如果你的update.rdf文件有误,是会提示验签失败的,也不知道firefox会不会优化这个提示,很

建议继续学习

  1. WordPress插件开发 -- 在插件使用数据库存储数据 (阅读 29,001)
  2. 分享一个JQUERY颜色选择插件 (阅读 14,063)
  3. Firefox的about 页面 (阅读 13,921)
  4. jQuery Color Animations颜色动画插件 (阅读 8,345)
  5. 精于图片处理的10款jQuery插件 (阅读 7,262)
  6. vim 常用插件推荐 (阅读 7,022)
  7. PHP Extension开发基础 (阅读 6,544)
  8. vim的一个js代码整理的插件jsbeautify.vim (阅读 6,023)
  9. nyroModal:强大的jQuery弹出层插件 (阅读 5,804)
  10. 如何创建google浏览器插件 (阅读 4,963)