Azioni delle estensioni in Manifest V3

Simeon Vincent
Simeon Vincent

Dal lancio delle estensioni di Chrome, la piattaforma ha consentito agli sviluppatori di esporre estensioni direttamente nell'interfaccia utente di primo livello di Chrome utilizzando le azioni. Un'azione è un pulsante icona puoi aprire un popup o attivare alcune funzionalità nell'estensione. Storicamente, Chrome supportava due tipi di azioni, azioni nel browser e azioni sulle pagine; Manifest V3 ha cambiato tutto grazie al consolidamento in una nuova API chrome.action.

Una breve cronologia delle azioni relative alle estensioni

Anche se lo stesso chrome.action è una novità in Manifest V3, le sue funzionalità di base risalgono al passato fino a quando le estensioni hanno subito la stabilità nel gennaio 2010. La prima versione stabile la versione della piattaforma di estensioni di Chrome supportava due diversi tipi di azioni: browser azioni e azioni sulla pagina.

Le azioni del browser hanno consentito agli sviluppatori di estensioni di mostrare un'icona "nella barra degli strumenti principale di Google Chrome, a destra della barra degli indirizzi". (fonte) e ha fornito agli utenti un modo semplice per attivare la funzionalità di estensione su qualsiasi pagina. Le azioni sulla pagina, invece, avevano lo scopo di "rappresentano azioni che possono essere intraprese sulla pagina corrente, ma che non sono applicabili a tutte le pagine" (fonte).

Nella omnibox viene visualizzata un'azione pagina (a sinistra), che indica che l'estensione può eseguire operazioni in questa pagina. Un'azione del browser (a destra) è sempre visibile.

In altre parole, le azioni del browser offrivano agli sviluppatori di estensioni una superficie UI permanente nel browser mentre le azioni nella pagina venivano visualizzate solo quando l'estensione poteva fare qualcosa di utile nella pagina corrente.

Entrambi i tipi di azioni erano facoltativi, quindi lo sviluppatore di un'estensione poteva decidere di non fornire azioni, un'azione sulla pagina o un'azione del browser (non è consentito specificare più azioni).

Circa sei anni dopo, Chrome 49 ha introdotto un nuovo paradigma di UI per le estensioni. Per aiutarti a capire quali estensioni avevano, Chrome ha iniziato a mostrare tutte le estensioni attive a destra della omnibox. Gli utenti potevano "overflow" nel menu Chrome, se lo desiderano.

Nel menu Chrome verranno visualizzate le icone delle estensioni nascoste.

Al fine di visualizzare un'icona per ogni estensione, questo aggiornamento ha introdotto anche due importanti modifiche il comportamento delle estensioni nell'UI di Chrome. Innanzitutto, tutte le estensioni hanno iniziato a visualizzare icone nella barra degli strumenti. Se l'estensione non aveva un'icona, Chrome ne genera una automaticamente. Secondariamente, le azioni sulla pagina spostato nella barra degli strumenti accanto alle azioni del browser e ha ricevuto l'invito per differenziare tra il loro "programma" e "nascondi" stati.

Per un'azione di pagina disattivata (a sinistra) viene visualizzata un'immagine in scala di grigi nella barra degli strumenti, mentre un'azione attiva (a destra) viene visualizzata a colori.

Questa modifica ha consentito alle estensioni delle azioni sulle pagine di continuare a funzionare come previsto, ma è diminuita anche. il ruolo delle azioni sulle pagine nel tempo. Uno degli effetti della riprogettazione dell'interfaccia utente è stato che le azioni sulle pagine effettivamente assorbito dalle azioni del browser. Poiché tutte le estensioni venivano visualizzate nella barra degli strumenti, gli utenti hanno prevedi che fare clic sull'icona di un'estensione nella barra degli strumenti richiami l'estensione e le azioni del browser è diventata un'interazione sempre più importante per le estensioni di Chrome.

Modifiche a Manifest V3

La UI e le estensioni di Chrome hanno continuato a evolversi negli anni dopo l'UI dell'estensione del 2016 riprogettato, ma le azioni del browser e quelle sulle pagine sono rimaste in gran parte invariate. Almeno fino a quando abbiamo iniziato a pianificare la modernizzazione della piattaforma delle estensioni con Manifest V3.

Il team addetto alle estensioni era chiaro che le azioni nel browser e sulle pagine erano sempre più una distinzione senza significato. Peggio ancora, le sottili differenze di comportamento rendevano difficile per gli sviluppatori determinare quale utilizzare. Ci siamo resi conto che potevamo risolvere questi problemi combinando e l'azione sulla pagina in un'unica "azione".

Inserisci l'API Action; chrome.action è direttamente analogo a chrome.browserAction, ma presenta alcune differenze notevoli.

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" potrebbe sembrare un nome un po' insolito per questa funzionalità rispetto, ad esempio, "isPinned", ma la cronologia delle azioni in Chrome indica che l'interfaccia utente del browser cambia più velocemente di le API di estensione. Pertanto, 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. Inoltre, consente ad altri fornitori di browser di esporre concetti di UI specifici del browser nell'oggetto UserSettings restituito da questo .

Secondo, l'icona e lo stato attivato/disattivato dell'azione di un'estensione possono essere controllati utilizzando API dichiarativa Content. È importante perché consente alle estensioni di reagire alla navigazione dell'utente comportamento degli utenti senza accedere ai contenuti o persino agli URL delle pagine visitate. Ad esempio, Scopri in che modo un'estensione può attivare la sua azione quando l'utente visita pagine su 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 fa un'estensione con un'azione sulla pagina. L'unico è che in Manifest V3 abbiamo usato declarativeContent.ShowAction anziché declarativeContent.ShowPageAction in Manifest V2.

Infine, i blocchi dei contenuti possono usare l'API declarativeNetRequest setExtensionActionOptions) per visualizzare il numero di richieste bloccate dall'estensione per una determinata scheda. Questa funzionalità è importante perché consente blocchi dei contenuti per tenere informati gli utenti finali senza esporre metadati di navigazione potenzialmente sensibili all'estensione.

Conclusione

La modernizzazione della piattaforma di estensioni di Chrome è stata una delle principali motivazioni per Manifest V3. In molti casi che comportavano il passaggio a nuove tecnologie, ma anche la semplificazione della superficie dell'API; il nostro obiettivo era questo.

Spero che questo post ti abbia aiutato a far luce su questo particolare angolo della piattaforma Manifest V3. A scopri di più su come il team di Chrome si sta avvicinando al futuro delle estensioni del browser, dai un'occhiata alla Visione della piattaforma e Panoramica di Manifest V3 nelle pagine documentazione per gli sviluppatori. Puoi anche discutere delle estensioni di Chrome con altri sviluppatori nella Gruppo Google chromium-extensions.