Interfaccia utente

Le estensioni che usa le API delle WebExtension sono fornite con diverse opzioni dell'interfaccia utente che possono aggiungere nuove funzioni all'utente. Un elenco di queste opzioni è presente di seguito, in questa sezione è presente una descrizione dettagliata di ogni opzione.

Per consigli sull'utilizzo di questi componenti UI per permettere un migliore utilizzo, da parte dell'utente, della vostra estensione, guardate l'articolo User experience best practices.

UI option Description Example
Toolbar button (browser action) Un pulsante nella barra degli strumenti del browser che invia un evento all'estensione quando si fa clic sul pulsante. Per impostazione predefinita, il pulsante è visibile in tutte le schede. Example showing a toolbar button (browser action).
Toolbar button with a popup Una finestra popup che si attiva facendo clic su un pulsante nella barra degli strumenti del browser. la finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente. Example of the pop-up on a toolbar button
Address bar button (page action) Un pulsante nella barra degli indirizzi del browser che invia un evento all'estensione quando si fa clic. Per impostazione predefinita, il pulsante è nascosto in tutte le schede. Example showing an address bar button (page action)
Address bar button with a popup Una finestra popup che si attiva facendo clic su un pulsante nella barra degli indirizzi del browser. La finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente. Example of a popup on the address bar button
Context menu item Elementi del menu, caselle di controllo e pulsanti di opzione su uno o più menu di scelta rapida del browser. Inoltre, i menu possono essere strutturati aggiungendo separatori. Quando si fa clic su una voce del menu, un evento viene inviato all'estensione. Example of content menu items added by a WebExtension, from the context-menu-demo example
Sidebar

Un documento HTML visualizzato accanto a una pagina Web, con l'opzione per contenuti unici per pagina. La barra laterale viene aperta quando viene installata l'estensione, quindi obbedisce alla selezione della visibilità della barra laterale dell'utente. L'interazione dell'utente all'interno della barra laterale è gestita dal suo documento HTML.

Example of a sidebar
Options page Una pagina che consente di definire le preferenze della vostra estensione che gli utenti possono modificare. L'utente può accedere a questa pagina dal gestore dei componenti aggiuntivi del browser. Example showing the options page content added in the favorite colors example.
Extension page Utilizzare le pagine Web incluse nell'estensione per fornire moduli, aiuto o qualsiasi altro contenuto richiesto, all'interno di finestre o schede. Example of a simple bundled page displayed as a detached panel.
Notification Notifiche temporanee visualizzate all'utente tramite il meccanismo delle notifiche del sistema operativo sottostante. Invia un evento all'estensione quando l'utente fa clic su una notifica o quando una notifica si chiude (automaticamente o su richiesta dell'utente). Example of an extension triggered system notification
Address bar suggestion Offre suggerimenti personalizzati sulla barra degli indirizzi quando l'utente inserisce una parola chiave. Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
Developer tools panel Una scheda con un documento HTML associato che viene visualizzato negli strumenti di sviluppo del browser. Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.

Le seguenti guide pratiche forniscono indicazioni dettagliate per la creazione di alcune di queste opzioni dell'interfaccia utente: