Para seguir este tutorial você precisará ter instalado o SDK e ter conhecimento básico sobre cfx.
Este tutorial usa a API action button, que está disponível somente do Firefox 29 em diante.
Para mostrar um popup de diálogo, use o módulo panel. Um painel de conteúdo é definido usando HTML. Você pode executar scripts no painel: embora o script em execução no painel não pode acessar diretamente o código de seu add-on, você pode trocar mensagens entre o script do painel e o código do add-on.
Neste tutorial nós criaremos um add-on que adiciona um action button à barra de ferramentas que mostra um painel quando clicado. O painel contém apenas um elemento <textarea>:quando o usuário aperta a tecla return, o conteúdo da <textarea> é enviado ao código principal do add-on. O código principal do add-on repassa a mensagem ao console.
O add-on consiste em seis arquivos:
main.js: o código principal do addon, que cria o botão e o painelget-text.js: o conteúdo do script que interage com o conteúdo do paineltext-entry.html: o conteúdo do painel em si, especificado como HTMLicon-16.png,icon-32.png, andicon-64.png: ícone para o botão em três tamanhos diferentes
O "main.js" se parece com isso:
var data = require("sdk/self").data;
// Constrói um painel, carrega seu conteúdo do arquivo
// "text-entry.html" no diretório "data", e carrega o script "get-text.js"
// para ele.
var text_entry = require("sdk/panel").Panel({
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
// Cria um botão
require("sdk/ui/button/action").ActionButton({
id: "show-panel",
label: "Show Panel",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
//Mostra o painel quando o usuário clica no botão
function handleClick(state) {
text_entry.show();
}
//Quando o painel é mostrado ele gera um evento chamado
//"show": nós esperaremos por este evento e quando ele ocorrer
//enviamos nosso próprio evento "show" para o script do painel,
//então o script pode preparar o painel para mostrar.
text_entry.on("show", function() {
text_entry.port.emit("show");
});
//Espera pela mensagem chamada "text-entered" vinda do
//script do conteúdo. A carga útil da mensagem é o texto
//digitado pelo usuário.
//Nesta implementação nós passaremos o texto para o console.
text_entry.port.on("text-entered", function (text) {
console.log(text);
text_entry.hide();
});
O conteúdo do script "get-text.js" parece com isto:
//Quando o usuário digita return, envia a mensagem "text-entered"
// para o main.js.
//A carga útil da mensagem é o conteúdo da caixa de edição.
var textArea = document.getElementById("edit-box");
textArea.addEventListener('keyup', function onkeyup(event) {
if (event.keyCode == 13) {
// Remove a nova linha.
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
self.port.emit("text-entered", text);
textArea.value = '';
}
}, false);
//Espera pelo evento "show" vim do
//código principal do add-on. O que significa que o
//painel sobre será mostrado.
//
//Configura o foco para a área de texto então o usuário pode
//começar a digitar.
self.port.on("show", function onShow() {
textArea.focus();
});
Finalmente, o arquivo "text-entry.html" define o elemento <textarea>:
<html>
<head>
<style type="text/css" media="all">
textarea {
margin: 10px;
}
body {
background-color: gray;
}
</style>
</head>
<body>
<textarea rows="13" cols="33" id="edit-box"></textarea>
</body>
</html>
Finalmente, salve estes três ícones no diretório "data":
 |
icon-16.png |
 |
icon-32.png |
 |
icon-64.png |
Teste: o "main.js" está salveo no diretório lib do add-on, e os outros cinco arquivos vão no diretório data do add-on:
my-addon/
data/
get-text.js
icon-16.png
icon-32.png
icon-64.png
text-entry.html
lib/
main.js
Execute o add-on, clique no botão, e você deverá ver o painel. Digite algum texto e pressione "return" e você deverá ver a saída no console.
Do Firefox 30 em diante, se você usar o toggle button, você pode anexar o painel ao botão.
Aprendendo Mais
Para aprender mais sobre o módulo panel, veja a referência da API panel.
Para aprender mais sobre buttons, veja referência da API action button e toggle button.