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, generalmente llamado ícono de acción para 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 chrome.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 chrome.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:

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

Cómo activar la acción de manera condicional

La API de chrome.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 el ícono de acción de una extensión está inhabilitado, este aparece inhabilitado. Si el usuario hace clic en el ícono inhabilitado, aparecerá el menú contextual de la extensión.

Un í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 información, como el estado de la extensión o que el usuario debe realizar alguna acción. Para demostrarlo, la muestra Drink Water muestra una insignia con la palabra "ON" para mostrarle al usuario que estableció 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 (izquierda) y con insignia (derecha).

Para establecer el texto de la insignia, llama a chrome.action.setBadgeText() y el color de fondo llamando a chrome.action.setBadgeBackgroundColor().

service-worker.js:

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

Información sobre la herramienta

Registra la información sobre la herramienta en el campo "default_title", en la clave "action" del 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 llamar a action.setTitle() para establecer o actualizar la información sobre la herramienta. Si no se establece ningún cuadro de información, se mostrará el nombre de la extensión.