Mozilla Firefox扩展(Extensions)开发——jpm

参考:https://developer.mozilla.org/en-US/Add-ons/SDK

最近看了很多关于Mozilla Firefox扩展开发的东西,Extension、add-on、plugin,着实有些迷糊了。还好后来发现了jpm:

jpm:Jetpack Manager for Node.js

Replacing the previous python tool for developing Firefox Add-ons, cfx, jpm is a utility for developing, testing, and packaging add-ons.

jpm是专门用于开发、测试和打包Firefox Add-ons的。下面就来说说如何使用jpm开发add-on吧!

1、安装node.js
https://nodejs.org/en/
2、安装jpm
方法一:
npm install jpm -g
方法二:
git clone https://github.com/mozilla-jetpack/jpm.git
cd jpm
npm install
npm link        
方法一安装不成功,我使用的是方法二。未安装git的先下载git:http://git-scm.com/download/win
安装的时间有点长,请耐心等待...
3、 创建扩展
mkdir my-addon
cd my-addon
jpm init
执行"jpm init"命令后会要求输入一些信息等,Title、name等,部分有默认值,可以直接回车即可。执行完成后会生成一个add-on框架。
my-addon
|——index.js
|——package.json
|——test
         |——test-index.js
执行:jpm run
        jpm test
分别安装和测试刚创建好的add-on。
执行:jpm xpi
该命令会将add-on打包成xpi文件,Mozilla add-ons的格式。
后面还有命令:
jpm post
jpm watchpost
jpm sign
这些命令可自行查阅:https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#Installation。
4、创建工具栏和右键菜单
1)、Adding a Button to the Toolbar

https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar

第3步中index.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/");
}
同时在my-addon目录下创建data目录,下面放icon-16.png、icon-32.png、icon-64.png三张图片。jpm run即可看到效果。

2)、Add a Context Menu Item

https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item

第3步中index.js内容改为如下即可:

var contextMenu = require("sdk/context-menu");
var menuItem = contextMenu.Item({
  label: "Log Selection",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var text = window.getSelection().toString();' +
                 '  self.postMessage(text);' +
                 '});',
  onMessage: function (selectionText) {
    console.log(selectionText);
  }
});




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值