Mostrar um Popup

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 painel
  • get-text.js: o conteúdo do script que interage com o conteúdo do painel
  • text-entry.html: o conteúdo do painel em si, especificado como HTML
  • icon-16.png, icon-32.png, and icon-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.