Implementare un'azione

Un'azione è ciò che accade quando un utente fa clic sull'icona della barra degli strumenti, in genere chiamata icona di azione per l'estensione. Un'azione richiama una funzionalità dell'estensione utilizzando l'API Action o apre un popup. Questa pagina mostra come richiamare una funzionalità dell'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. Per una descrizione completa delle proprietà facoltative di questo campo, consulta la sezione del manifest della documentazione dell'API chrome.action.

manifest.json:

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

Rispondere all'azione

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

service-worker.js:

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

Attivare l'azione in modo condizionale

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

Icona di un'azione disattivata
Icona di un'azione disattivata.

Badge di azione

I badge sono bit di testo formattato posizionati sopra l'icona dell'azione per indicare, ad esempio, lo stato dell'estensione o che sono necessarie azioni da parte dell'utente. Per dimostrare questo, il Sample Bere acqua mostra un badge con la dicitura "ON" per indicare 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 di estensione senza badge e con badge.
Un'icona di estensione con un badge (a sinistra) e senza 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" nel 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.