快速业务通道

安装Firefox的Jetpack扩展的步骤

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-01

Firefox 的 Jetpack 可以让我们很轻松地创建 Firefox 插件,仅通过已掌握的前端技能(HTML/CSS/JS),估计让人更兴奋的一点—— Jetpack 还集成了 jQuery 框架。

Adobe Air 也好,Web OS 也好, Jetpack 也好,至少让我们肯定一点,前端的价值将会在机遇中越来越大的被展现。

下面让我们一起来看看如何一步步创建你的第一个 Firefox 的 Jetpack 扩展:

第一步:安装 Jetpack 插件

Jetpack 插件地址:https://jetpack.mozillalabs.com/install.html

安装完成 Jetpack 插件后,你就可以通过在地址栏中输入 about:jetpack 来访问 Jetpack 本地界面了。

about:jetpack

第二步:创建 planabc.js 文件。

planabc.js 的详细代码为:

jetpack.statusBar.append({
    html
: ''<img src="http://www.planabc.net/favicon.ico"/>'',
    width
: 16,
    onReady
: function(widget){
        $
(widget).click(function(){
            jetpack
.tabs.focused.contentWindow.location = "http://www.planabc.net/";
       
});
   
}
});

jetpack.statusBar.append 将执行 JavaScript 对象(该JavaScript 对象有四个属性:html、url、width 和 onReady)。

  • html 属性:定义初始的 HTML,将显示在状态栏。此样例中,将显示一个简单的 IMG 元素。
  • url 属性:定义将在状态栏上显示的外部 HTML 内容的 URL。此样例中,未使用该属性。
  • width 属性:定义内容在状态栏上的宽度(单位:像素)。此样例中,定义为 16 像素,也就是 IMG 元素本身的宽度。
  • onReady 属性:定义被调用的函数(一旦状态栏被创建,此函数将会被调用)。由于 Jetpack 集成了 jQuery 框架,所以可以直接使用 jQuery 的属性和方法。在此样例中定义了这样一个函数,当点击该 Jetpack 扩展时,我们将修改 jetpack.tabs.focused.contentWindow.location 属性为 http://www.planabc.net/jetpack.tabs.focused.contentWindow.location 对象相当于 window 对象,你可以访问通过 JavaScript 访问网页。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号