Cómo implementar una acción

Una acción es lo que sucede cuando un usuario hace clic en el ícono de la barra de herramientas, que suele llamarse ícono de acción de tu extensión. Una acción invoca una función de extensión con la API de Action o abre una ventana emergente. En esta página, se muestra cómo invocar una función de extensión. Para usar una ventana emergente, consulta Cómo agregar una ventana emergente.

Registra la acción

Para usar la API de browser.action, agrega la clave "action" al archivo de manifiesto de la extensión. Consulta la sección del manifiesto de la referencia de la API de browser.action para obtener una descripción completa de las propiedades opcionales de este campo.

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

Responde a la acción

Registra un controlador onClicked para cuando el usuario haga clic en el ícono de acción. Este evento no se activa si se registra una ventana emergente en el archivo manifest.json.

service-worker.js:

browser.action.onClicked.addListener((tab) => {
  browser.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

Activa la acción de forma condicional

La API de browser.declarativeContent te permite habilitar el ícono de acción de la extensión según la URL de la página o cuando los selectores CSS coinciden con los elementos de la página. Cuando se inhabilita el ícono de acción de una extensión, este aparece en gris. Si el usuario hace clic en el ícono inhabilitado, aparecerá el menú contextual de la extensión.

Ícono de acción inhabilitado
Ícono de acción inhabilitado.

Insignia de acción

Las insignias son fragmentos de texto con formato que se colocan sobre el ícono de acción para indicar aspectos como el estado de la extensión o que el usuario debe realizar acciones. Para demostrarlo, el ejemplo de Beber agua muestra una insignia con el texto "ON" para indicarle al usuario que configuró correctamente una alarma y no muestra nada cuando la extensión está inactiva. Las insignias pueden contener hasta cuatro caracteres.

Un ícono de extensión sin insignia y con insignia.
Un ícono de extensión con una insignia (izquierda) y sin una insignia (derecha).

Establece el texto de la insignia llamando a browser.action.setBadgeText() y el color de fondo llamando a browser.action.setBadgeBackgroundColor().

service-worker.js:

browser.action.setBadgeText({text: 'ON'});
browser.action.setBadgeBackgroundColor({color: '#4688F1'});

Información sobre la herramienta

Registra las sugerencias en el campo "default_title" de la clave "action" en el archivo manifest.json.

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

También puedes configurar o actualizar las sugerencias llamando a action.setTitle(). Si no se configura ninguna sugerencia, se mostrará el nombre de la extensión.