Este tutorial percorre a criação de um add-on simples usando o SDK.
Pré-requisitos
Para criar add-ons para Firefox usando SDK, você primeiro precisará seguir as instruções para instalar e ativar o SDK. Uma vez que você fez isso, você estará olhando para um prompt de comando.
Inicializando um add-on vazio
No prompt de comando, crie um novo diretório. O diretório não precisa estar no diretório principal do SDK: você pode criar ele em qualquer lugar que você quiser. Navegue para ele, digite cfx init, e tecle enter:
mkdir my-addon cd my-addon cfx init
Você verá uma saída como esta:
* lib directory created * data directory created * test directory created * doc directory created * README.md written * package.json written * test/test-main.js written * lib/main.js written * doc/main.md written Your sample add-on is now ready for testing: try "cfx test" and then "cfx run". Have fun!"
Implementando o add-on
Agora você pode escrever o código do add-on, que vai no arquivo "main.js" em diretório "lib". Esse arquivo foi criado para você no passo anterior. Abra ele 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: "Visite 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/");
}
Salve o arquivo.
Próximo, salve estes ícones no diretório "data" de seu add-on:
 |
icon-16.png |
 |
icon-32.png |
 |
icon-64.png |
Volte ao prompt de comando, digite:
cfx run
Este é o comando SDK para executar uma nova instância do Firefox com seu add-on instalado. Quando o Firefox inicia, no canto de cima do lado direito do navegador você verá um ícone com o logotipo do Firefox. Clique nele, e uma nova tab abrirá com o site https://www.mozilla.org/ carregado nela.
Isso é tudo que esse add-on faz. Ele usa dois módulos SDK: o módulo action button, que permite a você adicionar botões ao navegador, e o módulo tabs, que permite a você realizar operações básicas com tabs. Nesse caso, nós criamos uma botão cujo ícone é o íncone do Firefox, e adicionamos um manipulador de clique que carrega a home page da Mozilla na nova tab.
Tente editar esse arquivo. Por exemplo, nós poderíamos mudar a página que é 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 novamente cfx run. Desta vez clicando levará você para https://developer.mozilla.org/.
Empacotando o add-on
Quando você termina o add-on e está preparado para distribui-lo, você precisa empacotá-lo como um arquivo XPI. Esse é um formato de arquivo instalável para add-ons de Firefox. Você pode distribuir arquivos XPI ou publicá-los em https://addons.mozilla.org assim outros usuários podem baixar e instalá-los.
Para construir um XPI, apenas execute o comando cfx xpi do diretório do add-on:
cfx xpi
Você deve ver uma mensagem como:
Exporting extension to my-addon.xpi.
Para testar que funcionou, tente instalar o arquivo XPI em sua própria instalação do Firefox. Você pode fazer isso pressionando Ctrl+O (Cmd+O no Mac) de dentro do Firefox, ou selecionando o item "Abrir arquivo" do menu "Arquivo" do Firefox. Isso trará uma caixa de seleção; navegue até o arquivo "my-addon.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:
cfx initpara inicializar um modelo vazio do add-oncfx runpara executar uma nova instância do Firefox com o add-on instalado, não nós testamos elecfx xpipara empacotar o add-on dentro do arquivo XPI para distribuição
Esses são os três principais comandos que você usará quando desenvolver add-ons no SDK. Há uma abrangente documentação de referência cobrindo todos os comandos que você pode usar e todas as opções que eles possuem.
O próprio código do add-on usa dois módulos do SDK, action button e tabs. Há documentação de referência para toda a API do SDK, de alto e baixo nível.
O que vem a seguir?
Para sentir algumas das coisas que você pode fazer com a API do SDK, tente trabalhar através de alguns dos tutorials.
Técnicas avançadas
Sobreescrevendo os módulos embutidos
Os módulos do SDK que você usa para implementar seu add-on estão embutidas no Firefox. Quando você executa ou empacota um add-on usando cfx run ou cfx xpi, o add-on usará as versões dos módulos na versão do Firefox que hospeda elas.
Como um desenvolvedor de add-on, isso é normalmente o que você quer. Mas se você está desenvolvendo os módulos SDK por si mesmo, claro, não será. Nesse caso assumimos que você pegou o SDK de seu repositório GitHub e executará o script bin/activate desse diretório raiz de trabalho.
Então quando você invoca cfx run ou cfx xpi, você passa a opçao "-o":
cfx run -o
Isso instrui o cfx a usar a cópia local dos módulos do SDK, não aqueles existentes no Firefox.
Desenvolvendo sem cfx run
Porque cfx run reinicia o navegador cada vez que você invoca ele, ele pode ser um pouco pesado se você está fazendo mudanças frequentes em um add-on. Um modelo de desenvolvimento alternativo é usar o add-on Extension Auto-Installer: este escuta para novos arquivos XPI em uma porta específica e instala-os automaticamente. Dessa maneira você pode testar novas mudanças sem precisar reiniciar o navegador:
- faça uma mudança em seu add-on
- execute cfx xpi
- posta o add-on para uma porta especificada
Você poderia até mesmo automatizar esse fluxo com um script simples. Por exemplo:
while true ; do cfx xpi ; wget --post-file=codesy.xpi https://localhost:8888/ ; sleep 5 ; done
Note que o nível de registro definido para o console é diferente quando você usa esse método, comparado com o nível de registro usado quando um add-on está executando usando cfx run. Isso significa que se você quiser ver a saída de mensagens do console.log(), você terá que ajustar uma configuração. Veja a documentação no nível de registros para mais detalhes sobre isso.
Um outro exemplo usando grunt e grunt-shell:
module.exports = function(grunt) {
'use strict';
require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
grunt.initConfig({
shell: {
xpi: {
command: [
'cd pluginpath',
'cfx xpi',
'wget --post-file=pluginname.xpi https://localhost:8888/ || echo>/dev/null'
].join('&&')
}
},
watch: {
xpi: {
files: ['pluginpath/**'],
tasks: ['shell:xpi']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-shell');
grunt.registerTask('default', ['watch']);
};