Mostrar una ventana emergente

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

Esta guía usa la API action button, la cual esta solo disponible para Firefox 29 en adelante.

Para mostrar un dialogo emergente, se usa el modulo panel. El contenido de un panel se define usando HTML. Puede ejecutar scripts de contenido en el panel: aunque el script que se ejecuta en el panel no pueda acceder directamente al código principal del add-on, puede intercambiar mensajes entre el script del panel y el código del add-on.

En esta guía se crea un add-on que agrega un botón de acción en la barra de herramientas, que al ser presionado muestra un panel. El panel solo contiene un elemento <textarea> : cuando se presiona la tecla return, el contenido del <textarea> es enviado al código principal del add-on. El código principal del add-on registra el mensaje en la terminal.

El add-on consta de seis archivos:

main.js: el código principal del add-on, que crea el botón y el panel
get-text.js: el script de contenido que interactua con el panel de contenido
text-entry.html: el propio panel de contenido, especificado en código HTML
icon-16.png, icon-32.png, y icon-64.png: iconos para el botón en tres tamaños diferentes

El archivo "main.js" contiene lo siguiente:

var data = require("sdk/self").data;
// Construct a panel, loading its content from the "text-entry.html"
// file in the "data" directory, and loading the "get-text.js" script
// into it.
var text_entry = require("sdk/panel").Panel({
  contentURL: data.url("text-entry.html"),
  contentScriptFile: data.url("get-text.js")
});

// Create a button
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
});

// Show the panel when the user clicks the button.
function handleClick(state) {
  text_entry.show();
}

// When the panel is displayed it generated an event called
// "show": we will listen for that event and when it happens,
// send our own "show" event to the panel's script, so the
// script can prepare the panel for display.
text_entry.on("show", function() {
  text_entry.port.emit("show");
});

// Listen for messages called "text-entered" coming from
// the content script. The message payload is the text the user
// entered.
// In this implementation we'll just log the text to the console.
text_entry.port.on("text-entered", function (text) {
  console.log(text);
  text_entry.hide();
});

El script de contenido "get-text.js" muestra:

// When the user hits return, send the "text-entered"
// message to main.js.
// The message payload is the contents of the edit box.
var textArea = document.getElementById("edit-box");
textArea.addEventListener('keyup', function onkeyup(event) {
  if (event.keyCode == 13) {
    // Remove the newline.
    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
    self.port.emit("text-entered", text);
    textArea.value = '';
  }
}, false);
// Listen for the "show" event being sent from the
// main add-on code. It means that the panel's about
// to be shown.
//
// Set the focus to the text area so the user can
// just start typing.
self.port.on("show", function onShow() {
  textArea.focus();
});

Finalmente, el archivo "text-entry.html" define el 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>

Por último, se guardan estos tres iconos en el directorio "data":

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

Pruebe lo siguiente: el archivo "main.js" se encuentra en el directorio lib del add-on, y los otros cinco archivos el el directorio data :

my-addon/
         data/
              get-text.js
              icon-16.png
              icon-32.png
              icon-64.png
              text-entry.html
         lib/
             main.js

Ejecute el add-on, presione el botón, y debería poder ver el panel. Escriba algo en el cuadro de texto y presione "return" y verá la salida en la terminal.

Desde Firefox 30 en adelante, si usa botón del selección simple, puede acoplar el panel al botón.

Conozca más

Para conocer más sobre el módulo panel, puede ver la referencia de la API panel.

Para conocer más sobre los botones, puede ver la referencia de la API action button y toggle button.

Mostrar una ventana emergente

Conozca más

Etiquetas y colaboradores del documento