Questo è un catalogo di elementi dell'interfaccia utente disponibili nelle estensioni. Ogni voce contiene:
- Un'immagine dell'elemento (se applicabile).
- Una descrizione dello scopo.
- Elementi dell'interfaccia correlati (se applicabili).
- Link a istruzioni di implementazione ed esempi di codice.
Questi elementi sono diversi modi per richiamare le funzionalità delle estensioni. Non è necessario implementarli tutti. In effetti, alcuni casi d'uso potrebbero non farne uso. Ad esempio, un link più corto potrebbe agire sull'URL visualizzato utilizzando una scorciatoia da tastiera e inserire il link abbreviato negli appunti in modo programmatico.
Azioni
Un'azione è ciò che accade quando un utente fa clic sull'icona di 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à delle estensioni. Indica agli utenti come funziona l'azione utilizzando una descrizione comando.
Per scoprire come creare un'azione, consulta Implementare un'azione o esaminare gli esempi di azioni.
Icone di azione
Un'estensione richiede almeno un'icona per rappresentarla. Gli utenti fanno clic sull'icona per richiamare un'azione, a prescindere dal fatto che l'azione richiama una funzionalità di estensione utilizzando l'API Action o apra un popup.
Puoi anche aggiungere un'etichetta, qui chiamata "badge", all'icona per indicare, ad esempio, lo stato dell'estensione o le azioni richieste dall'utente.
Per scoprire come creare un'azione, consulta Implementare un'azione o esaminare gli esempi di azioni.
Badge
I badge sono frammenti di testo formattato sopra l'icona di azione per indicare, ad esempio, lo stato dell'estensione o che alcune azioni sono richieste dall'utente. Puoi impostare il testo del badge chiamando chrome.action.setBadgeText() e il colore del banner chiamando chrome.action.setBadgeBackgroundColor().
Per scoprire come creare un'azione, consulta la sezione Implementare un'azione o guarda l'esempio di Acqua potabile.
Comandi
I comandi sono combinazioni di chiavi che richiamano una funzionalità di estensione. Definisci le combinazioni di chiavi nel file manifest.json e rispondi utilizzando l'API Commands.
Per scoprire come implementare un comando, consulta il riferimento API o l'esempio di chrome.commands.
Menu contestuale
Viene visualizzato un menu contestuale per il clic alternativo (spesso definito clic con il tasto destro del mouse) di un mouse. Definisci i menu contestuali utilizzando l'API dei menu contestuali.
Per informazioni su 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 dalle estensioni nella omnibox, l'estensione controlla ciò che l'utente vede nella omnibox. Definisci le parole chiave nel file manifest.json e rispondi utilizzando l'API omnibox.
Per informazioni su come eseguire l'override della omnibox, vedi Attiva le azioni dalla omnibox o l'esempio di riferimento dell'API rapida.
Esegui l'override delle pagine
Un'estensione può eseguire l'override di una di queste pagine integrate di Chrome:
- Cronologia
- Nuova scheda
- Preferiti
Per informazioni su come eseguire l'override delle pagine di Chrome, consulta l'articolo Eseguire l'override delle pagine di Chrome o leggi l'esempio di override.
Popup
Un popup è un'azione che mostra una finestra che consente agli utenti di richiamare più funzionalità delle estensioni. I popup possono essere aperti solo se l'utente fa clic sull'icona di azione. Un'estensione non può aprire il popup in modo programmatico.
Per scoprire come creare un popup, vedi Aggiungere un popup. Puoi anche scaricare un passaggio tramite uno degli esempi di azioni.
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 è controllato mediante l'API Side Panel.
Per scoprire come creare un riquadro laterale, consulta i casi d'uso del riquadro laterale o esamina gli esempi di questi riquadri.
Descrizioni comandi
Una descrizione comando è un modo per mostrare, quando un utente passa il mouse sulla tua icona di azione, l'azione dell'estensione. Per impostazione predefinita, la descrizione comando mostra il nome dell'estensione.
Per scoprire come aggiungere una descrizione comando, utilizza il membro "default_title" della chiave "action" dei file manifest.
DevTools
Puoi aggiungere riquadri personalizzati (le schede chiamate in DevTools) a DevTools utilizzando l'API DevTools. Altre API DevTools consentono di monitorare Windows e il traffico di rete. Puoi anche personalizzare il riquadro del recorder di DevTools. Il riquadro Lighthouse di Chrome DevTools è iniziato come estensione DevTools.
Notifiche
Pubblica messaggi sulla barra delle applicazioni di un utente utilizzando le estensioni API Notifications o l'API Notifications per le piattaforme web.
Per scoprire come utilizzare le notifiche, consulta Inviare notifiche agli utenti.
Temi
Un tema è un tipo speciale di estensione che cambia l'aspetto del browser. I temi sono pacchettizzati come estensioni normali, ma non contengono codice JavaScript o HTML.
Per scoprire come creare un tema, vedi Cosa sono i temi?.
Altre modalità di interazione con gli utenti
Questa sezione descrive altri modi in cui l'estensione può interagire con gli utenti. Anche se non sono strettamente necessarie 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 funzioni possono essere spesso utili a coloro che non hanno bisogno dell'accessibilità come mezzo principale per interagire con l'estensione. Scopri le nozioni di base per rendere accessibile l'estensione.
Internazionalizzazione
Comunica con gli utenti nella loro lingua. Scopri come internazionalizzare l'interfaccia.