Sin dal lancio delle estensioni di Chrome, la piattaforma ha consentito agli sviluppatori di esporre le funzionalità delle estensioni direttamente nell'interfaccia utente di Chrome di primo livello utilizzando le azioni. Un'azione è un pulsante icona che può aprire un popup o attivare alcune funzionalità dell'estensione. In passato, Chrome supportava due tipi di azioni: azioni del browser e azioni sulle pagine. Manifest V3 ha modificato questo comportamento consolidando la relativa funzionalità in una nuova API chrome.action.
Breve cronologia delle azioni delle estensioni
Sebbene chrome.action sia una nuova funzionalità in Manifest V3, la funzionalità di base fornita risale
alla data in cui le estensioni sono introdotte nella versione stabile per la prima volta nel gennaio 2010. La prima versione stabile della piattaforma di estensioni di Chrome supportava due diversi tipi di azioni: azioni del browser e azioni sulle pagine.
Le azioni del browser hanno consentito agli sviluppatori di estensioni di visualizzare un'icona "nella barra degli strumenti principale di Google Chrome, a destra della barra degli indirizzi" (fonte) e hanno offerto agli utenti un modo semplice per attivare la funzionalità delle estensioni su qualsiasi pagina. Le azioni sulle pagine, invece, avevano lo scopo di "rappresentare azioni che possono essere eseguite nella pagina corrente, ma che non sono applicabili a tutte le pagine" (fonte).
In altre parole, le azioni del browser fornivano agli sviluppatori di estensioni un'interfaccia utente persistente nel browser, mentre le azioni sulle pagine venivano visualizzate solo quando l'estensione poteva fare qualcosa di utile nella pagina corrente.
Entrambi i tipi di azioni erano facoltativi, pertanto uno sviluppatore di estensioni poteva scegliere di non fornire azioni, un'azione sulla pagina o un'azione nel browser (non è consentito specificare più azioni).
Circa sei anni dopo, Chrome 49 ha introdotto un nuovo paradigma UI per le estensioni. Per aiutare gli utenti a capire quali estensioni avevano, Chrome ha iniziato a mostrare tutte le estensioni attive a destra della omnibox. Se lo desideravano, gli utenti potevano aggiungere estensioni nel menu Chrome.
Al fine di visualizzare un'icona per ogni estensione, questo aggiornamento ha introdotto anche due importanti modifiche al comportamento delle estensioni nell'interfaccia utente di Chrome. Innanzitutto, tutte le estensioni hanno iniziato a mostrare icone nella barra degli strumenti. Se l'estensione non avesse un'icona, Chrome ne genererà automaticamente una. In secondo luogo, le azioni nelle pagine sono state spostate nella barra degli strumenti insieme alle azioni del browser e hanno avuto l'opportunità di distinguere gli stati "mostra" e "nascondi".
Questa modifica ha consentito alle estensioni di azioni sulle pagine di continuare a funzionare come previsto, ma ha anche ridotto il ruolo delle azioni sulle pagine nel tempo. Uno degli effetti della riprogettazione dell'interfaccia utente è che le azioni sulle pagine venivano effettivamente sottratte dalle azioni del browser. Poiché tutte le estensioni venivano visualizzate nella barra degli strumenti, gli utenti si aspettavano che, facendo clic sull'icona della barra degli strumenti di un'estensione, l'estensione veniva richiamata e le azioni del browser diventavano un'interazione sempre più importante per le estensioni di Chrome.
Modifiche manifest V3
La UI e le estensioni di Chrome hanno continuato a evolversi negli anni successivi alla riprogettazione dell'interfaccia utente delle estensioni del 2016, ma le azioni del browser e delle pagine sono rimaste sostanzialmente invariate. Almeno fino a quando non abbiamo iniziato a pianificare come modernizzare la piattaforma delle estensioni con Manifest V3.
Al team delle estensioni era chiaro che le azioni nel browser e nelle pagine rappresentavano sempre più una distinzione senza significato. Peggio ancora, le loro sottili differenze di comportamento rendevano difficile per gli sviluppatori determinare quale utilizzare. Ci siamo resi conto che potevamo risolvere questi problemi combinando l'azione nel browser e l'azione sulla pagina in un'unica "azione".
Inserisci l'API Action. chrome.action è simile a chrome.browserAction in modo più diretto, ma presenta alcune differenze significative.
Innanzitutto, chrome.action introduce un nuovo metodo denominato getUserSettings(). Questo metodo consente agli sviluppatori di estensioni di verificare se l'utente ha bloccato l'azione dell'estensione nella barra degli strumenti.
let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);
"getUserSettings" può sembrare un nome un po' insolito per questa funzionalità rispetto, ad esempio, "isFixed", ma la cronologia delle azioni in Chrome mostra che l'interfaccia utente del browser cambia più velocemente rispetto alle API di estensione. Di conseguenza, il nostro obiettivo con questa API è esporre le preferenze dell'utente relative alle azioni su interfacce generiche per ridurre al minimo il futuro tasso di abbandono delle API. Consente inoltre ad altri fornitori di browser di esporre concetti di interfaccia utente specifici del browser nell'oggetto UserSettings restituito da questo metodo.
In secondo luogo, l'icona e lo stato attivo/disattivato dell'azione di un'estensione possono essere controllati utilizzando l'API Declarative Content. Questo aspetto è importante perché consente alle estensioni di reagire al comportamento di navigazione dell'utente senza accedere ai contenuti o persino agli URL delle pagine che visita. Ad esempio, vediamo in che modo un'estensione può attivare la sua azione quando l'utente visita le pagine di example.com.
// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.example.com'},
})
],
actions: [new chrome.declarativeContent.ShowAction()]
}
]);
});
});
Il codice riportato sopra è quasi identico a quello che un'estensione farebbe con un'azione della pagina. L'unica differenza è che in Manifest V3 abbiamo utilizzato declarativeContent.ShowAction anziché declarativeContent.ShowPageAction in Manifest V2.
Infine, i blocchi dei contenuti possono utilizzare il metodo setExtensionActionOptions dell'API declarativeNetRequest per visualizzare il numero di richieste bloccate dall'estensione per una determinata scheda. Questa funzionalità è importante perché consente ai blocchi dei contenuti di tenere informati gli utenti finali senza esporre metadati di navigazione potenzialmente sensibili all'estensione.
Conclusione
La modernizzazione della piattaforma delle estensioni di Chrome è stata una delle principali motivazioni di Manifest V3. In molti casi ciò significa passare a nuove tecnologie, ma anche semplificare la piattaforma delle API. Questo è il nostro obiettivo.
Spero che questo post ti abbia aiutato a farti luce su questo aspetto specifico della piattaforma Manifest V3. Per scoprire di più sull'approccio del team di Chrome al futuro delle estensioni del browser, consulta le pagine relative alla visione della piattaforma e alla Panoramica di Manifest V3 nella nostra documentazione per gli sviluppatori. Puoi anche discutere delle estensioni di Chrome con altri sviluppatori nel gruppo Google chromium-extensions.