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".
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
browser_action
manifest keybrowserAction
API- Ejemplos de acciones del navegador:
page_action
manifest keypageAction
API- Ejemplos de Acciones de p谩gina: