Implementare un'azione

Un'azione è ciò che accade quando un utente fa clic sull'icona della barra degli strumenti, generalmente chiamata icona dell'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 i 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 file manifest di riferimento dell'API chrome.action.

manifest.json:

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

Rispondi all'azione

Registra un gestore onClicked quando l'utente fa clic sull'icona di 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 sulla pagina. Quando l'icona delle azioni di un'estensione è disattivata, l'icona non è selezionabile. Se l'utente fa clic sull'icona di disattivazione, viene visualizzato il menu contestuale dell'estensione.

. Icona di un'azione disattivata.

Badge di azione

I badge sono frammenti di testo formattato posizionati sopra l'icona di azione per indicare, ad esempio, lo stato dell'estensione o che sono richieste azioni da parte dell'utente. A dimostrazione di ciò, l'esempio di acqua potabile mostra un badge con la dicitura "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 di 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" 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 viene impostata alcuna descrizione comando, viene visualizzato il nome dell'estensione.