Agregar un Botón a la Barra de Herramienta

Para agregar un botón a la barra de herramientas, use los módulos action button o toggle button.

Cree un nuevo directorio, accese al directorio recien creado, y ejecute cfx init.

Luego guarde estos tres iconos en el directrio "data":

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

Luego abra el archivo llamado "main.js" en el directorio "lib" y agregue el siguiente código:

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

Ahora ejecute el add-on con cfx run. El botón es agregado a la barra de herramientas en la parte superior de la ventana del navegador:

Puede fijar la localización inicial del botón, pero el usuario puede moverlo usando la función para personalizar del navegador. El atributo id es obligatorio, y es usado para recordar la posición del botón, por lo tanto no debería cambiarse en las versiones siguientes del add-on.

Hacer clic en el botón cargará la página https://www.mozilla.org/ en una nueva pestaña.

Especificar el icono

La propiedad del icono puede especificar un solo icono o una colección de iconos de diferentes tamaños, como en el ejemplo anterior. Si se especifica una colección de iconos de diferentes tamaños el navegador automáticamente seleccionará el que mejor se ajuste a la resolución de pantalla y el lugar en la IU del navegador que alberga el botón. Lea mas sobre especificar múltiples iconos.

El archivo del icono debe ser empacado con el add-on: no debe referenciar a una archivo remoto.

Puede cambiar el icono en cualquier momento estableciendo la propiedad del icono del botón. Puede cambiar el icono, y otros atributos de estado, incluso globalmente, para una ventana o pestaña específica. Lea mas sobre la actualización de estado.

Fijando un panel

Si necesita fijar un panel a un botón, use la API toggle button. Esta es similar a la API action button pero agrega la propiedad booleana checked cuyo estado cambia cuando el botón es seleccionado. Para fijar el panel, pase el botón al método show() del panel. Para más detalles sobre esto, vea la documentación de toggle button.

Mostrar contenido mas sofisticado

Para crear interfaces de usuario más complejas de las que son posibles con solo un botón, use la AIP toolbar. Con la API toolbar obtiene una franja horizontal completa de la interfaz de usuario. Puede agregar botones a la barra de herramientas y también marcos, que pueden contener HTML, CSS, y JavaScript.

Aprender más

• manual de referencia de action button
• manual de referencia de toggle button
• manual referencia  de toolbar