Adicionando um botão à barra de ferramentas

Para adicionar um botão à barra de ferramentas, use os módulos action button ou toggle button.

Crie um novo diretório, navegue até ele, e execute cfx init.

Então salve estes três ícones no diretório "data":

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

Então abra o arquivo chamado "main.js" no diretório "lib" e adicione o seguinte código a ele:

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

Agora execute o add-on com cfx run. O botão é adicionado à barra de ferramentas no topo da janela do navegador:

Você não pode configurar a localização inicial para o botão, mas o usuário pode mover ele usando as características de personalização do navegador. O id é obrigatório, e é usado para lembrar a posição do botão, então você não deve mudá-lo em versões subsequentes do add-on.

Clicando no botão carrega https://www.mozilla.org/ em uma nova tab.

Especificando o ícone

A propriedade ícone pode especificar um único ícone ou uma coleção de ícones em diferentes tamanhos, como o exemplo acima. Se você especificar uma coleção de ícones em diferentes tamanhos o navegador automaticamente escolherá o melhor para a resolução de tela em uso e coloca na interface de usuário do navegador que hospeda o botão. Leia mais sobre especificar múltiplos ícones.

O arquivo de ícone deve ser empacotado com seu add-on: ele não pode referenciar um arquivo remoto.

Você pode mudar o ícone a qualquer hora configurando a propriedade icon do botão. Você pode mudar o ícone, e os outros atributos de estado, ou globalmente, para uma janela específica, ou para uma tab específica. Leia mais sobre atualização de estado.

Anexando um painel

Se você precisar anexar um panel a um botão, use a API toggle button. É como a API do action button exceto que ele adiciona uma propriedade boleana checked que é alternada sempre que o botão é checado. Para anexar o painel, passe o método show() do painel. Para mais detalhes sobre isso, veja a documentação do toggle button.

Mostrando conteúdo mais rico

Para criar conteúdo mais complexo para a interface do usuário do que é possível com apenas um botão, use a API toolbar. Com a API toolbar você consegue uma faixa horizontal da interface do usuário. Você pode adicionar botões à barra de ferramentas e também frames, que podem ter HTML, CSS, e JavaScript.

Aprendendo mais

• Referência action button
• Referência toggle button
• Referência toolbar