Firefox附加组件开发-环境准备

原创
2014/11/21 00:20
阅读数 185

最近想学学火狐的插件开发,上网上查了下,有些以前的文章,说是资料很少,开发文档也少。但是发现官网上现在已经有了比较详细的介绍,有也相应的sdk和工具,使用很简单。下面文章的基本是官方的文档的翻译。

一、环境准备

    更详细安装方法参见https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation

二、入门样例

在这里https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started有一个入门样例,在工具栏上添加一个按钮,点击后打开指定页面。

  1. 初始化

    进入sdk目录,运行以下命令:
    bin\activate mkdir my-addon
    cd my-addon
    cfx init

    可以看到在my-addon文件夹下创建lib, data, test三个目录和package.json文件,这些是一个组件的基本结构。data目录是放一些资源文件的,lib目录下的main.js,是组件的入口。test目录下的test-main.js是测试的入口。

  2. 实现

    修改main.js,添加如下代码:
    var buttons = require('sdk/ui/button/action');
    var tabs = require("sdk/tabs");
    
    var button = buttons.ActionButton({
      id: "mozilla-link",
      label: "Visit Mozilla",
      icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
      },
      onClick: handleClick
    });
    
    function handleClick(state) {
      tabs.open("https://www.mozilla.org/");
    }


    下载以下三个图标保存到data目录下

    icon-16.png
    icon-32.png
    icon-64.png
  3. 运行

    执行以下命令:
    cfx run

    然后会打开一个firefox实例,会看到多一个按钮。

    点击按钮后就会打开一个新标签。

  4. 打包

    运行以下命令:
    cfx xpi
    打包后的文件可以用firefox打开进行安装。
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部