Agregar bot贸n a la barra de herramientas

La barra de herramientas es una de las principales componentes UI disponibles para las extensiones. Toolbar buttons live in the main browser toolbar y contienen un icono. Cuando el usuario da click en el icono, dos cosas pueden suceder:

  • Si tu tienes especificado un popup para el icono, se va a mostrar. Popups son  transitorios cuadros de di谩logos creados usando  HTML, CSS, y JavaScript.
  • Si no tu tienes especificado un popup, un evento del click es generado,el cual puede ser detectado en tu codigo para realizar alguna acci贸n  y responderla.

Con las  APIs de WebExtension, este tipo de bot贸n es se llaman "browser actions", y son  configurados de la siguiente manera:

  • La clave  browser_action  en manifest.json es usada para definir el  bot贸n.
  • La API de JavaScript browserAction es usada para escuchar los  clicks y cambiar el bot贸n o realizar alguna acci贸n en el codigo.

Un simple bot贸n

En esta secci贸n vamos a crear una extension que agrega un bot贸n a la barra de herramientas. Cuando el usuario de click en el bot贸n, vamos abrir https://developer.mozilla.org en una nueva pesta帽a.

Primero, crear una nueva carpeta "bot贸n", y crea un archivo con el nombre de "manifest.json"  con el siguiente contenido:

{

  "description": "Demostrando botones de la barra de herramientas",
  "manifest_version": 2,
  "name": "bot贸n-demo",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }

}

Esto especifica que tenemos un  background script  llamado "background.js",  y un browser action (but贸n) cuyo icono va a estar en la carpeta "icons".

Estos iconos son de  bitsies! conjunto de iconos creados por Recep K眉t眉k.

Despues, dentro del folder "bot贸n"  crea la carpeta "icons"  y dentro de el guarda estos dos iconos:

  • "page-16.png" ()
  • "page-32.png" ().
 

Tenemos dos iconos entonces podemos usar el mas grande para las pantallas de alta densidad. El navegador se va encargar de seleccionar el correcto para cada pantalla.

Despues, crea "background.js" en la raiz del folder de la extension, y agrega el siguiente contenido:

function openPage() {
  browser.tabs.create({
    url: "https://developer.mozilla.org"
  });
}

browser.browserAction.onClicked.addListener(openPage);

Esto esta a la espera de de el navegador se de click; cuando el evento se dispara, la funcion openPage() comienza a ejecutarse,  el cual abre la p谩gina especificada usando la API de tabs.

En este momento la extension debe de mirarse asi:

button/
    icons/
        page-16.png
        page-32.png
    background.js
    manifest.json

Ahora  instala la extensi贸n  y da  click en el bot贸n:

Agregando un popup

Vamos a intentar agregar un popup al bot贸n.  Remplaza el manifest.json con este contenido:

{

  "description": "Demostrando botones de la barra de herramientas",
  "manifest_version": 2,
  "name": "bot贸n-demo",
  "version": "1.0",

  "browser_action": {
    "browser_style": true,
    "default_popup": "popup/choose_page.html",
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }

}

Realizamos tres cambios:

  • Ya no hacemos referencia a  "background.js",  porque ahora nosotros vamos a controlar la l贸gica de la extensi贸n en el script del popup (Tambi茅n es posible background.js  como un popup,  es solo qu no lo necesitamos en este caso).
  • Agregamos "browser_style": true, cual nos ayuda a dar estiloa nuestro popup y luzca mas integrado al navegador.
  • Finalmente, agregamos "default_popup": "popup/choose_page.html", cual le dice al navegador que esta acci贸n ahora va a mostar un popup cuando se haga click , usando el documento que se encuentra en "popup/choose_page.html".

Entonces ahora necesitamos crear el  popup. Crea un folder llamado "popup"  y crea adentro el archivo  "choose_page.html" . agregale el siguiente contenido:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="choose_page.css"/>
  </head>

<body>
  <div class="page-choice">developer.mozilla.org</div>
  <div class="page-choice">support.mozilla.org</div>
  <div class="page-choice">addons.mozilla.org</div>
  <script src="choose_page.js"></script>
</body>

</html>

Puedes notar que es un nomal archivo HTML que contiene tres elementos <div>, con direcciones de Mozilla. Tambi茅n incluye archivos de CSS y  JavaScript, en los cuales vamos agregar lo siguiente.

Crea el archivo "choose_page.css"  adentro de la carpeta "popup" , con el siguiente contenido:

html, body {
  width: 300px;
}

.page-choice {
  width: 100%;
  padding: 4px;
  font-size: 1.5em;
  text-align: center;
  cursor: pointer;
}

.page-choice:hover {
  background-color: #CFF2F2;
}

Es solo un poco de estilo a nuestro popup.

Ahora, crea un  archivo "choose_page.js" dentro del folder "popup" con el siguiente contenido:

document.addEventListener("click", function(e) {
  if (!e.target.classList.contains("page-choice")) {
    return;
  }

  var chosenPage = "https://" + e.target.textContent;
  browser.tabs.create({
    url: chosenPage
  });

});

En nuestro JavaScript,  esta a la espera de clicks en las opciones de nuestro popup. Primero revisa si el click fue en una de nuestras elecciones, si no, no realizamos nada mas. Se seleccion una carga una p谩gina elegida,  en una nueva pesta帽a con la correspondiente p谩gina. Nota que podemos usar las APIs WebExtension  en el script del popup, como tambi茅n scripts de fondo.

La  estructura de la extensi贸n final debe ser como esta:

button/
    icons/
        page-16.png
        page-32.png
    popup/
        choose_page.css
        choose_page.html
        choose_page.js
    manifest.json

Ahora vamos a recargar la extensi贸n, click en el bot贸n  otra vez e intenta dar click en las opciones del popup:

Acciones de p谩gina

Acciones de p谩gina son como las acciones del navegador, excepto que son acciones relevantes solo para algunas p谩gina en particular.

Mientras de las acciones del navegaro siembre son mostradas, las acciones de p谩gina son solo mostradas en pesta帽as donde son relevantes. Los botones de las acciones de p谩gina son mostradas en la barra URL , en vez de la barra de herramientas del navegador.

Aprende m谩s