Mostrar una ventana emergente

This is an archived page. It's not actively maintained.

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.