Un anno fa, a maggio 2022, abbiamo aggiunto il riquadro laterale a Chrome. Si tratta di una nuova piattaforma complementare che consente agli utenti di utilizzare strumenti insieme ai contenuti che stanno consultando. Oggi siamo lieti di annunciare che la tua estensione può iniziare a mostrare contenuti nel riquadro laterale a partire da Chrome 114.
Migliore per gli utenti, più facile per gli sviluppatori
Abbiamo già visto molti sviluppatori implementare esperienze simili a quelle delle barre laterali nella loro estensione ed è per questo che siamo entusiasti di renderla standard della piattaforma. Con la nuova API Side Panel, ora puoi offrire un'interfaccia utente permanente che si apre accanto alla pagina che l'utente sta visitando. Gli utenti trarranno vantaggio da un posizionamento e un layout coerenti tra le estensioni. Inoltre, la possibilità di mostrare l'interfaccia utente senza richiedere autorizzazioni di host è un vantaggio significativo per la privacy per gli utenti, con il vantaggio aggiuntivo di ridurre il numero di avvisi visualizzati per l'estensione al momento dell'installazione.
L'API Side Panel elimina i problemi associati all'inserimento di contenuti in una pagina non attendibile. Inoltre, riduce notevolmente la necessità di mantenere la compatibilità tra siti diversi e di controllare le segnalazioni di bug relative a interruzioni accidentali causate dall'estensione.
Un'integrazione per gli utenti sul web
Quando crei una nuova esperienza del riquadro laterale nell'ambito dell'estensione, devi tenere presente una cosa: come stai aiutando gli utenti a completare le attività sul web? Ecco alcune domande che dovresti prendere in considerazione:
- In che modo il mio riquadro laterale aiuta l'utente?
- Il criterio relativo alla uso singolo si applica anche al riquadro laterale. Assicurati che il riquadro laterale fornisca funzionalità direttamente correlate al resto dell'estensione e all'obiettivo dell'utente.
- Il mio riquadro laterale viene visualizzato solo se è pertinente?
- L'API Side Panel ti consente di scegliere i siti su cui gli utenti vedranno il riquadro laterale. In questo modo puoi evitare di mostrarli quando non sono pertinenti per l'utente o non sono correlati ai contenuti che l'utente sta sfogliando.
- Il design è coerente con il resto dell'estensione?
- Il riquadro laterale deve avere un design visivamente accattivante che si abbini al logo, ai colori, alle icone e ai caratteri dell'estensione e della scheda dello Store. In questo modo gli utenti hanno un'esperienza coerente e riconoscibile ovunque utilizzino la tua estensione.
- In che modo gli utenti scoprono il mio riquadro laterale?
- Fai sapere ai nuovi utenti come utilizzare il riquadro laterale fornendo documentazione o formazione sufficiente all'interno dell'estensione. In questo modo potrai fidelizzare gli utenti ed evitare recensioni negative nella tua scheda dello Store. Ricorda che puoi iniziare a insegnare agli utenti prima che installino l'estensione includendo un video di YouTube che mostra come funziona l'estensione nella tua scheda dello Store.
Inoltre, abbiamo aggiornato le Norme del programma con aggiornamenti alle sezioni Best practice e Norme sulla qualità per riflettere alcune di queste considerazioni. Queste modifiche evidenziano che il riquadro laterale dovrebbe fungere da complemento utile alle esperienze di navigazione degli utenti, poiché fornisce funzionalità complementari. Inoltre, chiariscono che il riquadro laterale non deve avere distrazioni inutili.
Una panoramica dell'API
Per visualizzare l'estensione nel riquadro laterale, richiedi l'autorizzazione "sidePanel" nel manifest e aggiungi la chiave "side_panel" con un "default_path" che rimanda a una pagina all'interno dell'estensione:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
In una pagina del riquadro laterale puoi caricare script e API di estensioni di chiamata come faresti per qualsiasi altra pagina di estensione. L'icona del riquadro laterale verrà recuperata dall'icona dell'estensione: non dimenticare di impostarla per un tocco di eleganza in più.
Funzionalità extra
Puoi collegare il riquadro laterale all'icona delle azioni per poterlo aprire facilmente in qualsiasi momento:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Se vuoi che il riquadro laterale venga visualizzato solo su pagine specifiche, puoi controllarlo ed evitare che venga visualizzato altrove non pertinente per l'utente:
service-worker.js:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!tab.url) return;
const url = new URL(tab.url);
if (url.origin === 'https://example.com') {
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
} else {
chrome.sidePanel.setOptions({ tabId, enabled: false });
}
});
Scopri di più
Abbiamo pubblicato la documentazione sull'API Side Panel che puoi iniziare a leggere oggi stesso. Abbiamo anche aggiunto samples al repository chrome-extensions-samples, uno spazio perfetto per vedere come l'API può essere utilizzata concretamente.
Come già accennato, anche le pagine relative alle norme e le best practice sono state riviste per condividere maggiori informazioni su come creare un riquadro laterale che offra agli utenti un'esperienza ottimale.
Per restare al passo con le novità riguardanti le estensioni di Chrome, visita la nostra pagina Novità. Se hai domande o hai bisogno di aiuto con l'API Side Panel, puoi visitare il gruppo di Google Gruppi relativo alle estensioni di Chromium.
Foto di Vardan Papikyan su Unsplash