繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 安装Firefox的Jetpack扩展的步骤
- CSS样式表
- 推荐一篇利用th,colgroup,col定义表格样式
- 都是IE惹的祸多浏览器兼容问题
- dl,dt,dd制作的CSS垂直菜单
- 推荐css打造经典鼠标触发显示选项
- div+css中Class与ID的区别
- CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
- 让iframe自适应高度（支持xhtml）IE firefox兼容
- 实用的利用 CSS + <em>标签 来完成一个三角形的制作
- CSS控制文本自动换行的问题
- 把 CDATA 中的内容（有可能是不规范的Html代码）以Html方式展现出来。
- 仿客齐集首页导航条DIV+CSS+JS [代码实例]
- 关于margin-left的示例代码
- CSS优化2-(常用CSS缩写语法总结)
- font和line-height之CSS代码书写顺序不同，导致显示效果不一样
- 推荐三种简洁的Tab导航（网页选项卡）简析
- 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！
- 解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
- CSS2实现的隔行换色
- CSS中几种常见的注释
- dhtml shtml xhtml的区别解析
CSS样式表 中的 安装Firefox的Jetpack扩展的步骤
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-27 浏览: 209 ::
收藏到网摘: n/a
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 本地界面了。
第二步：创建 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 访问网页。
第三步：测试 planabc.js 代码。
通过在地址栏中输入 about:jetpack 访问到 Jetpack 本地界面，点击 Develop 标签，然后将 planabc.js 文件中的代码拷贝到页面上的输入框中。点击 “try out this code” 按钮，你将会看到一个新的 icon 出现在 Firefox 窗口的右下角。
Develop 非常方便在代码部署前，在 Firefox 中测试你的代码。
第四步：部署 Jetpack 扩展。
创建一个简单的页面，在页面的 HEAD 元素内添加如下的 LINK 元素：
<link rel="jetpack" href="planabc.js" name="怿飞的博客"/>
HTML 文件 源码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mozilla Jetpack 案例</title>
<link rel="jetpack" href="planabc.js" name="怿飞的博客"/>
</head>
<body>
<a href="http://www.planabc.net/2009/10/13/
build_firefox_extensions_with_jetpack/">《如何创建 Firefox 的 Jetpack 扩展》 </a>
</body>
</html>
最后，将 HTML 文件和 planabc.js 文件都上传到服务器。
第五步：安装 Jetpack 扩展。
在 Firefox 中浏览该 HTML 页面时，Jetpack 插件将会在屏幕的最上方显示一个安装条，点击 “install” 按钮。将会提示安装不受信任的特性，点击 “I know what I’m doing. Install It!” 按钮。
安装完成和第三步测试一样，将会看到一个新的 icon 出现在 Firefox 窗口的右下角。如果此时你发现状态栏有2个相同的新 icon，那意味着原先的测试代码依然还在 about:jetpack 页面的 Develop 标签页中，清空输入框的代码即可消除。
返回到 about:jetpack 页面，点击 Installed Features 标签，将在列表中显示有新安装的 Jetpack 扩展。
测试Demo：http://www.planabc.net/lab/jetpack/planabc/
评论 (0) All
