Si tratta di un catalogo di elementi dell'interfaccia utente disponibili nelle estensioni. Ogni voce contiene:
- Un'immagine dell'elemento (se applicabile).
- Una descrizione del suo scopo.
- Elementi dell'interfaccia correlati (se applicabile).
- Link alle istruzioni di implementazione e agli esempi di codice.
Questi elementi sono diversi modi per richiamare le funzionalità delle estensioni. Non è obbligatorio implementarle tutte. Infatti, alcuni casi d'uso potrebbero non utilizzarne nessuno. Ad esempio, un accorciatore di link potrebbe agire sull'URL visualizzato utilizzando una scorciatoia da tastiera e inserire il link accorciato negli appunti in modo programmatico.
Azioni
Un'azione è ciò che accade quando un utente fa clic sull'icona Azione per la tua estensione. Un'azione può richiamare una funzionalità di estensione utilizzando l'API Action o aprire un popup che consente agli utenti di richiamare più funzionalità di estensione. Spiega agli utenti cosa fa l'azione utilizzando una descrizione comando.
Per imparare a creare un'azione, consulta Implementare un'azione o esamina gli esempi di azioni.
Icone delle azioni
Un'estensione richiede almeno un'icona per rappresentarla. Gli utenti fanno clic sull'icona per richiamare un'azione, che richiama una funzionalità di estensione utilizzando l'API Action o apre un popup.
Puoi anche aggiungere un'etichetta, qui chiamata "badge", all'icona per comunicare informazioni come lo stato dell'estensione o che sono richieste azioni da parte dell'utente.
Per imparare a creare un'azione, consulta Implementare un'azione o esamina gli esempi di azioni.
Badge
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. Puoi impostare il testo del badge chiamando chrome.action.setBadgeText() e il colore del banner chiamando chrome.action.setBadgeBackgroundColor().
Per imparare a creare un'azione, consulta Implementare un'azione o l'esempio Bevi acqua.
Comandi
I comandi sono combinazioni di tasti che richiamano una funzionalità dell'estensione. Definisci le combinazioni di tasti nel file manifest.json e rispondi utilizzando l'API Commands.
Per imparare a implementare un comando, consulta i riferimenti API o l'esempio chrome.commands.
Menu contestuale
Viene visualizzato un menu contestuale per il clic alternativo (spesso chiamato clic con il tasto destro del mouse). Definisci i menu contestuali utilizzando l'API Context Menus.
Per scoprire come implementare un menu contestuale, consulta gli esempi di menu contestuale.
Omnibox
Puoi interagire con gli utenti utilizzando la omnibox di Chrome. Quando un utente inserisce parole chiave definite dall'estensione nella omnibox, l'estensione controlla ciò che l'utente vede nella omnibox. Definisci le parole chiave in manifest.json e rispondi utilizzando l'API Omnibox.
Per scoprire come eseguire l'override dell'omnibox, consulta Attivare azioni dall'omnibox o l'esempio di riferimento rapido dell'API.
Esegui l'override delle pagine
Un'estensione può ignorare una di queste pagine integrate di Chrome:
- Cronologia
- Nuova scheda
- Preferiti
Per scoprire come ignorare le pagine di Chrome, consulta Ignorare le pagine di Chrome o l'esempio di override.
Popup
Un popup è un'azione che mostra una finestra che consente agli utenti di richiamare più funzionalità dell'estensione. I popup possono essere aperti se l'utente fa clic sull'icona Azione, tramite una scorciatoia da tastiera o chiamando chrome.action.openPopup().
Per scoprire come creare un popup, consulta Aggiungere un popup. Puoi anche scaricare un passaggio da uno degli esempi di azione.
Riquadri laterali
Un riquadro laterale consente agli utenti di richiamare le funzionalità delle estensioni insieme alle pagine web (vedi l'immagine). Un riquadro laterale può essere collegato a una singola scheda o a un'intera finestra. Un riquadro laterale viene controllato utilizzando l'API Side Panel.
Per scoprire come creare un riquadro laterale, consulta i casi d'uso del riquadro laterale o esamina gli esempi di riquadro laterale.
Descrizioni comando
Una descrizione comando è un modo per mostrare, quando un utente passa il mouse sopra l'icona azione, cosa fa l'azione della tua estensione. Per impostazione predefinita, la descrizione comando mostra il nome dell'estensione.
Per imparare ad aggiungere una descrizione comando, utilizza il membro "default_title" della chiave "action" dei file manifest.
DevTools
Puoi aggiungere riquadri personalizzati (come vengono chiamate le schede in DevTools) a DevTools utilizzando l'API DevTools Panels. Altre API DevTools ti consentono di monitorare le finestre e il traffico di rete. Puoi anche personalizzare il pannello Registratore di DevTools. Il riquadro Lighthouse di Chrome DevTools è nato come estensione DevTools.
Notifiche
Pubblica messaggi nella barra delle notifiche di un utente utilizzando l'API Notifications delle estensioni o l'API Notifications delle piattaforme web.
Per informazioni sull'utilizzo delle notifiche, vedi Inviare una notifica agli utenti.
Temi
Un tema è un tipo speciale di estensione che modifica l'aspetto del browser. I temi vengono pacchettizzati come le normali estensioni, ma non contengono codice JavaScript o HTML.
Per scoprire come creare un tema, consulta Che cosa sono i temi?.
Altri modi di interagire con gli utenti
Questa sezione descrive altri modi in cui l'estensione può interagire con gli utenti. Sebbene non siano strettamente necessari per un'estensione di base, possono essere parti importanti dell'estensione. Per molti utenti, alcune di queste funzionalità sono assolutamente essenziali per l'utilizzo dell'estensione.
Accessibilità
Per molti utenti, l'accessibilità è letteralmente l'interfaccia utente e le sue funzionalità possono spesso essere utili a chi non ha bisogno dell'accessibilità come mezzo principale di interazione con l'estensione. Scopri le basi per rendere accessibile la tua estensione.
Internazionalizzazione
Parla agli utenti nella loro lingua. Scopri come internazionalizzare l'interfaccia.