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 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 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": {
   ...
  }
 ...
}

Cómo responder 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}`});
});

Activa la acción de forma 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 se inhabilita el ícono de acción de una extensión, este se inhabilita. Si el usuario hace clic en el ícono inhabilitado, aparecerá el menú contextual de la extensión.

Insignia de acción

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

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

service-worker.js:

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

Información sobre la herramienta

Registra las indicaciones sobre herramientas en el campo "default_title" debajo 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 indicaciones sobre herramientas llamando a action.setTitle()`. Si no se establece ninguna, se muestra el nombre de la extensión.