Começando (jpm)

O Add-on SDK inclui uma ferramenta de linha de comando que você usa para inicializar, executar, testar, e empacotar add-ons. A ferramenta de linha de comando atual é chamada de jpm, e é baseada no Node.js. Ela substitui a ferramenta antiga cfx.

Você pode usar o jpm do Firefox 38 em diante.

Este artigo descreve como desenvolver usando jpm.

Este tutorial ensina a criação de uma add-on simples usando o SDK.

Pré-requisitos

Para criar add-ons para Firefox usando o SDK, você precisará:

Firefox versão 38 ou anteriores. Se você precisar trabalhar com versões anteriores do Firefox, você precisará usar a ferramenta cfx. Veja as instruções em getting started with cfx.
a ferramenta de linha de comando jpm. Veja instruções para instalação do jpm. Uma vez que você fez isso, você vai estar a olhar para um prompt de comando.

Inicializando um add-on vazio

No promp de comando, crie um novo diretório. Navegue até ele, digite jpm init, e tecle enter:

mkdir my-addon
cd my-addon
jpm init

Você será instado à fornecer algumas informações para seu add-on: isso será usado para criar o arquivo package.json do seu add-on. Por enquanto, apenas pressione enter para aceitar o padrão para cada propriedade. Para mais informação sobre jpm init, veja o jpm command reference.

Uma vez que você forneceu um valor ou aceitou o padrão para estas propriedades, será apresentado a você o conteúdo completo do "package.json" e instado a aceitá-lo.

Implementando o add-on

Agora você pode escrever o código do add-on. A menos que você mudou o valor de entrada ("main" no package.json), ele vai no arquivo "index.js" na raiz de seu add-on. Este arquivo foi criado para você no passo anterior. Abra-o e adicione o seguinte código:

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/");
}

Note que os "pontos de entrada" padrões para "index.js" no jpm, signifca que seu arquivo principal é "index.js", e é encontrado diretamente na raiz do seu add-on.

No cfx, o ponto de entrada padrão para "main.js", e é localizado no diretório "lib" na raiz no add-on.

Salve o arquivo.

Próximo, crie um diretório chamado "data" na raiz do add-on, e salve estes três ícones no diretório "data":

	icon-16.png
	icon-32.png
	icon-64.png

Volte ao promp de comando, digite:

jpm run

Este é o comando jpm para executar uma nova instância do Firefox com seu add-on instalado.

Quando o Firefox lança, no canto superior direito do navegador você verá um ícone com o logotipo do Firefox. Clique no ícone, e uma nova tab abrirá com o site https://www.mozilla.org/ carregado.

Isso é tudo que este add-on faz. Ele usa dois módulos SDK: o módulo action button, que lhe permite adicionar botões ao navegador, e o módulo tab, que lhe permite executar operações básicas com o módulo tabs. Neste caso, nós criamos um botão cujo ícone é o ícone do Firefox, e adicionamos um manipulado de click que carrega a página do Mozilla na nova tab.

Tente editar este arquivo. Por exemplo, nós poderíamos mudar a página que está sendo carregada:

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://developer.mozilla.org/");
}

No promp de comando, execute jpm run novamente. Desta vez clicando lhe levará para https://developer.mozilla.org/.

Empacotando o add-on

Quando você terminou o add-on e estiver preparado para distribui-lo, você precisará empacotá-lo como um arquivo XPI. Esta é a forma instalável dos add-ons do Firefox. Você pode distribuir os arquivos XPI por si mesmo ou publicá-los em https://addons.mozilla.org então outros usuários podem baixar eles.

Para construir um XPI, apenas execute o comando jpm xpi do diretório do add-on:

jpm xpi

Você deveria ver uma mensagem como:

JPM info Successfully created xpi at /path/to/getting-started/@getting-started.xpi

Para testar que isso funciona, tente instalar o arquivo XPI em sua própria instalação do Firefox. Você pode fazer isso pressionando a combinação de teclas Ctrl+O (Cmd+O no Mac) de dentro do Firefox, ou selecionando o menu "Open" do menu "Arquivo" do Firefox. Isso trará uma caixa de diálogo de seleção de arquivo: navegue para o arquivo "@getting-started.xpi", abra-o e siga o prompt para instalar o add-on.

Resumo

Neste tutorial nós construímos e empacotamos um add-on usando três comandos:

jpm init para inicializar um modelo de add-on vazio
jpm run para executar uma nova instância do Firefox com o add-on instalado, então nós testamos ele
jpm xpi para empacotar o add-on em um arquivo XPI para distribuição

Há três comandos principais que você usará quando desenvolvendo add-ons com SDK. Há documentação abrangente no reference documentation cobrindo todos os comandos que você pode usar e todas as opções que eles levam.

O código do add-on por si usa dois módulos SDK, action button e tabs. Há documentação de referência para todas as APIS do SDK tanto as de alto nível quanto as de baixo nível.

O que vem agora?

Para ter uma ideia das coisas que você pode fazer com as APIs do SDK, tente trabalhar com alguns dos tutoriais.