Implementare un'azione

Un'azione è ciò che accade quando un utente fa clic sull'icona della barra degli strumenti, generalmente chiamata icona di azione per l'estensione. Un'azione richiama una funzionalità di estensione utilizzando l'API Action o apre un popup. Questa pagina mostra come richiamare una funzionalità di estensione. Per utilizzare un popup, vedi Aggiungere un popup.

Registra l'azione

Per utilizzare l'API chrome.action, aggiungi la chiave "action" al file manifest dell'estensione. Consulta la sezione manifest del riferimento dell'API chrome.action per una descrizione completa delle proprietà facoltative di questo campo.

manifest.json:

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

Rispondere all'azione

Registra un gestore onClicked per i clic dell'utente sull'icona dell'azione. Questo evento non viene attivato se viene registrato un popup nel file manifest.json.

service-worker.js:

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

Attiva l'azione in modo condizionale

L'API chrome.declarativeContent ti consente di attivare l'icona di azione dell'estensione in base all'URL della pagina o quando i selettori CSS corrispondono agli elementi della pagina. Quando l'icona di azione di un'estensione è disattivata, l'icona non è selezionabile. Se l'utente fa clic sull'icona disattivata, viene visualizzato il menu contestuale dell'estensione.

Un'icona di azione disattivata
Icona di azione disattivata.

Badge di azione

I badge sono frammenti di testo formattato posizionati sopra l'icona delle azioni per indicare, ad esempio, lo stato dell'estensione o che l'utente deve eseguire alcune azioni. Per dimostrare ciò, nell'esempio di acqua potabile viene mostrato un badge con l'indicazione "ON" per mostrare all'utente che ha impostato correttamente una sveglia e non mostra nulla quando l'estensione è inattiva. I badge possono contenere fino a quattro caratteri.

Un'icona dell'estensione senza badge e con un badge.
Icona di un'estensione senza badge (a sinistra) e con un badge (a destra).

Imposta il testo del badge chiamando chrome.action.setBadgeText() e il colore di sfondo chiamando chrome.action.setBadgeBackgroundColor()`.

service-worker.js:

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

Descrizione comando

Registra le descrizioni comando nel campo "default_title" sotto la chiave "action" del file manifest.json.

manifest.json:

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

Puoi anche impostare o aggiornare le descrizioni comando chiamando action.setTitle()`. Se non è impostata alcuna descrizione comando, viene visualizzato il nome dell'estensione.