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 simili a una barra laterale nella propria estensione, perché siamo entusiasti di renderlo uno standard della piattaforma. Con la nuova API Side Panel, puoi ora può offrire una UI persistente che si apre insieme a una pagina visitata dall'utente. Gli utenti usufruiscono di un posizionamento e di un layout coerenti tra le estensioni. Inoltre, è possibile mostrare L'UI senza richiedere le autorizzazioni dell'host è un vantaggio significativo per gli utenti in termini di privacy, con l'aggiunta il 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à su diversi siti e controllare le segnalazioni di bug su interruzioni accidentali causate dal tuo .
Un'app complementare per gli utenti sul web
Quando crei una nuova esperienza con il riquadro laterale nell'estensione, devi tenere una cosa mente: come aiuti gli utenti a completare attività sul web? Ecco alcune domande che prendere in considerazione i seguenti aspetti:
- 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. Questo 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 riquadro laterale dovrebbe fungere da utile complemento per gli utenti esperienze di navigazione offrendo 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 la pagina dell'estensione. L'icona del riquadro laterale verrà recuperata dall'estensione icona: 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 riquadro laterale venga visualizzato solo in pagine specifiche, puoi controllarlo e impedire 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 sulle estensioni di Chromium.
Foto di Vardan Papikyan su Unsplash