Un anno fa, a maggio 2022, abbiamo aggiunto il riquadro laterale a Chrome. Si tratta di una nuova superficie complementare che consente agli utenti di utilizzare gli strumenti insieme ai contenuti che stanno sfogliando. Oggi siamo felici 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 alla barra laterale nella loro estensione, motivo per cui siamo entusiasti di renderla uno standard della piattaforma. Con la nuova API Side Panel, ora puoi offrire un'interfaccia utente persistente che si apre accanto a una 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 le autorizzazioni host è un vantaggio significativo per la privacy degli utenti, con l'ulteriore vantaggio 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 il requisito di mantenere la compatibilità tra diversi siti e di esaminare le segnalazioni di bug relative a interruzioni accidentali causate dall'estensione.
Un compagno per gli utenti sul web
Quando crei una nuova esperienza del riquadro laterale come parte della tua estensione, devi tenere presente una cosa: in che modo aiuti gli utenti a completare le attività sul web? Ecco alcune domande da considerare:
- In che modo il mio riquadro laterale aiuta l'utente?
- Le norme relative a un singolo scopo si applicano 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 vedranno il riquadro laterale. In questo modo puoi evitare di mostrarlo quando non è pertinente per l'utente o non è correlato ai contenuti che sta sfogliando.
- Il design è coerente con il resto della mia 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. In questo modo, gli utenti avranno un'esperienza coerente e riconoscibile ovunque utilizzino l'estensione.
- In che modo gli utenti scoprono il mio riquadro laterale?
- Informa i nuovi utenti su 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 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 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 sottolineano che il riquadro laterale deve fungere da utile complemento per le esperienze di navigazione degli utenti fornendo funzionalità complementari. Inoltre, chiariscono che il riquadro laterale non deve contenere distrazioni non necessarie.
Panoramica dell'API
Affinché l'estensione venga visualizzata 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 chiamare le API delle estensioni come faresti in qualsiasi altra pagina dell'estensione. L'icona del riquadro laterale verrà presa dall'icona dell'estensione . Non dimenticare di impostarla per un tocco di eleganza in più.
Funzionalità aggiuntive
Puoi collegare il riquadro laterale all'icona dell'azione, in modo che possa essere aperto 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 e impedirne la visualizzazione 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. Abbiamo anche aggiunto esempi al repository chrome-extensions-samples, che è un ottimo posto per vedere come l'API può essere utilizzata in pratica.
Come accennato, anche le nostre pagine relative alle norme e le best practice sono state riviste per condividere maggiori informazioni su come creare un riquadro laterale che offra la migliore esperienza per gli utenti.
Puoi rimanere aggiornato sulle novità delle estensioni di Chrome visitando la nostra pagina Novità e, se hai domande o hai bisogno di aiuto con l'API Side Panel, puoi visitare il gruppo Google delle estensioni di Chromium.