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 gli strumenti insieme ai contenuti che stanno sfogliando. Oggi siamo lieti di annunciare che l'estensione può iniziare a mostrare contenuti nel riquadro laterale a partire dalla versione 114 di Chrome.
Migliore per gli utenti, più facile per gli sviluppatori
Abbiamo già visto molti sviluppatori implementare esperienze di tipo barra laterale nella propria estensione, motivo per cui siamo entusiasti di renderlo uno standard della piattaforma. Con la nuova API Side Panel, ora puoi offrire una UI permanente che si apre insieme alla pagina visitata dall'utente. Gli utenti trarranno vantaggio dalla coerenza del posizionamento e del layout tra le estensioni. Inoltre, la possibilità di mostrare l'interfaccia senza richiedere le autorizzazioni dell'host è un vantaggio significativo per la privacy degli utenti, con l'ulteriore vantaggio di ridurre il numero di avvisi mostrati 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 diversi siti e di esaminare segnalazioni di bug su interruzioni accidentali causate dall'estensione.
Un'app complementare per gli utenti sul web
Quando crei una nuova esperienza di riquadro laterale come parte della tua estensione, devi tenere una cosa in mente: come stai aiutando gli utenti a completare attività sul web? Ecco alcune domande che dovresti porti:
- In che modo il mio riquadro laterale aiuta l'utente?
- La norma relativa alla scopo singola si applica anche al riquadro laterale. Assicurati che il riquadro laterale fornisca funzionalità direttamente correlate al resto dell'estensione e a ciò che l'utente sta cercando di ottenere.
- Il mio riquadro laterale viene visualizzato solo quando è pertinente?
- L'API Side Panel ti consente di scegliere i siti su cui gli utenti visualizzeranno il riquadro laterale. In questo modo, puoi evitare di mostrarli quando non sono pertinenti per l'utente o non sono correlati ai contenuti che sta sfogliando.
- Il design è coerente con il resto dell'estensione?
- Il riquadro laterale deve avere un design visivamente accattivante che corrisponda al logo, ai colori, alle icone e ai caratteri dell'estensione e della scheda dello Store. Ciò fornisce agli utenti un'esperienza coerente e riconoscibile ovunque utilizzino l'estensione.
- In che modo gli utenti trovano il mio riquadro laterale?
- Fai sapere ai nuovi utenti come usare il tuo 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 mostri come funziona l'estensione nella tua scheda dello Store.
Abbiamo anche 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 tuo riquadro laterale dovrebbe fungere da utile complemento all'esperienza di navigazione degli utenti, fornendo funzionalità complementari. Inoltre, chiariscono che il riquadro laterale non dovrebbe avere distrazioni inutili.
Una panoramica dell'API
Per fare in modo che l'estensione venga visualizzata nel riquadro laterale, richiedi l'autorizzazione "sidePanel" nel file manifest e aggiungi la chiave "side_panel" con un "default_path" che rimandi 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 in qualsiasi altra pagina di estensione. L'icona del riquadro laterale verrà recuperata dall'icona dell'estensione. Non dimenticarti di impostarla per un tocco di eleganza.
Funzionalità extra
Puoi collegare il riquadro laterale all'icona delle azioni per aprirlo facilmente in qualsiasi momento:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Se desideri che il tuo riquadro laterale venga visualizzato solo su pagine specifiche, puoi controllarlo ed evitare che venga visualizzato altrove dove 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 dell'API Side Panel, che puoi iniziare a leggere oggi stesso. Abbiamo anche aggiunto samples al repository chrome-extensions-samples, che è un ottimo modo per vedere come utilizzare nella pratica l'API.
Come già detto, anche le pagine delle norme e le best practice sono state riviste per fornire maggiori informazioni su come creare un riquadro laterale che offra agli utenti la migliore esperienza possibile.
Per restare al passo con le novità sulle estensioni di Chrome, visita la nostra pagina Novità. Se hai domande o hai bisogno di assistenza in merito all'API Side Panel, puoi visitare il gruppo Google Estensioni di Chromium.
Foto di Vardan Papikyan su Unsplash