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

最新推荐文章于 2023-06-06 22:59:50 发布

转载最新推荐文章于 2023-06-06 22:59:50 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/haodut/blog/347008

文章标签：

#python #ui #json

本文详细介绍如何使用Firefox SDK开发浏览器插件，包括环境搭建、示例代码及插件打包等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

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

一、环境准备

python
需要安装2.5、2.6或者2.7版本的python，不支持3.x。可以到 http://www.python.org/下载安装，安装时注意要将python添加到path下。
firefox
开发firefox附加组件当然需要安装firefox，到 http://www.firefox.com.cn/ 下载安装即可。
addon sdk
从这里 https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip下载sdk，解压即可。使用前需要进入sdk的目录运行 bin\activate 来设置环境变量。

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

二、入门样例

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

初始化
进入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是测试的入口。

实现

修改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目录下