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 init para inicializar um modelo vazio do add-on
  • cfx run para executar uma nova instância do Firefox com o add-on instalado, não nós testamos ele
  • cfx xpi para 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 http://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 http://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']);
};

Etiquetas do documento e colaboradores

 Colaboradores desta página: Pheanor
 Última atualização por: Pheanor,