Le estensioni sono pacchetti compressi di HTML, CSS, JavaScript, immagini e altri file utilizzati nella piattaforma web che personalizzano l'esperienza di navigazione di Google Chrome. Le estensioni sono create utilizzando la tecnologia web e possono utilizzare le stesse API che il browser fornisce al web aperto.
Le estensioni offrono un'ampia gamma di possibilità funzionali. Possono modificare i contenuti web visualizzati dagli utenti e con cui interagiscono oppure estendere e modificare il comportamento del browser stesso.
Considera le estensioni come la porta d'accesso per rendere il browser Chrome il più personalizzato possibile.
File di estensione
Le estensioni variano in base ai tipi di file e alla quantità di directory, ma tutte devono avere un [manifest][docs-manifest]. Alcune estensioni di base, ma utili, potrebbero essere costituite solo dal manifest e dalla relativa icona della barra degli strumenti.
Il file manifest, denominato manifest.json, fornisce al browser informazioni sull'estensione, ad esempio i file più importanti e le funzionalità che l'estensione potrebbe utilizzare.
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
Le estensioni devono avere un'icona nella barra degli strumenti del browser. Le icone della barra degli strumenti consentono un facile accesso e informano gli utenti sulle estensioni installate. La maggior parte degli utenti interagisce con un'estensione che utilizza un popup facendo clic sull'icona.
Questa estensione Google Mail Checker utilizza un'azione del browser:
Questa estensione Mappy utilizza un'azione di pagina e uno script di contenuti:
Riferimento ai file
È possibile fare riferimento ai file di un'estensione utilizzando un URL relativo, proprio come i file di una normale pagina HTML.
<img src="images/my_image.png">
Inoltre, è possibile accedere a ogni file anche utilizzando un URL assoluto.
chrome-extension://EXTENSION_ID/PATH_TO_FILE
Nell'URL assoluto, EXTENSION_ID è un identificatore univoco generato dal sistema di estensioni per ogni estensione. Gli ID di tutte le estensioni caricate possono essere visualizzati andando all'URL chrome://extensions. PATH_TO_FILE è la posizione del file nella cartella principale dell'estensione e corrisponde all'URL relativo.
Quando lavori su un'estensione non pacchettizzata, l'ID estensione può cambiare. Nello specifico, l'ID di un'estensione
non pacchettizzata cambierà se l'estensione viene caricata da una directory diversa; l'ID
cambierà di nuovo quando l'estensione viene pacchettizzata. Se il codice di un'estensione si basa su un URL assoluto, può utilizzare il metodo chrome.runtime.getURL() per evitare di codificare l'ID durante lo sviluppo.
Architettura
L'architettura di un'estensione dipende dalla sua funzionalità, ma molte estensioni robuste includono più componenti:
Script di background
Lo script di sfondo è il gestore di eventi dell'estensione; contiene listener per gli eventi del browser importanti per l'estensione. Rimane inattivo finché non viene attivato un evento, quindi esegue la logica indicata. Uno script di sfondo efficace viene caricato solo quando è necessario e scaricato quando diventa inattivo.
Elementi UI
L'interfaccia utente di un'estensione deve essere mirata e minimalista. L'interfaccia utente deve personalizzare o migliorare l'esperienza di navigazione senza distrarre l'utente. La maggior parte delle estensioni ha un'azione del browser o un'azione della pagina, ma può contenere altre forme di UI, come menu contestuali, l'utilizzo dell'omnibox o la creazione di una scorciatoia da tastiera.
Le pagine dell'interfaccia utente dell'estensione, ad esempio un popup, possono contenere normali pagine HTML con logica JavaScript. Le estensioni possono anche chiamare tabs.create o window.open() per visualizzare
file HTML aggiuntivi presenti nell'estensione.
Un'estensione che utilizza un'azione di pagina e un popup può utilizzare l'API declarative content per impostare regole nello script di sfondo per quando il popup è disponibile per gli utenti. Quando le condizioni sono soddisfatte, lo script di sfondo comunica con il popup per rendere la sua icona cliccabile per gli utenti.
Script di contenuti
Le estensioni che leggono o scrivono pagine web utilizzano uno script dei contenuti. Lo script dei contenuti contiene JavaScript che viene eseguito nei contesti di una pagina caricata nel browser. Gli script dei contenuti leggono e modificano il DOM delle pagine web visitate dal browser.
I content script possono comunicare con l'estensione principale scambiando messaggi e memorizzando i valori utilizzando l'API storage.
Pagina delle opzioni
Proprio come le estensioni consentono agli utenti di personalizzare il browser Chrome, la pagina delle opzioni consente la personalizzazione dell'estensione. Le opzioni possono essere utilizzate per attivare funzionalità e consentire agli utenti di scegliere le funzionalità pertinenti alle loro esigenze.
Utilizzo delle API Chrome
Oltre ad avere accesso alle stesse API delle pagine web, le estensioni possono utilizzare anche
API specifiche per le estensioni che creano un'integrazione stretta con il browser. Le estensioni e
le pagine web possono accedere al metodo standard window.open() per aprire un URL, ma le estensioni possono
specificare in quale finestra deve essere visualizzato l'URL utilizzando il metodo dell'API Chrome
tabs.create.
Metodi asincroni e sincroni
La maggior parte dei metodi dell'API Chrome sono asincroni: vengono restituiti immediatamente senza attendere il completamento dell'operazione. Se un'estensione deve conoscere il risultato di un'operazione asincrona, può passare una funzione di callback nel metodo. Il callback viene eseguito in un secondo momento, potenzialmente molto più tardi, dopo la restituzione del metodo.
Se l'estensione deve spostare la scheda attualmente selezionata dall'utente su un nuovo URL, deve ottenere l'ID della scheda corrente e aggiornare l'indirizzo della scheda con il nuovo URL.
Se il metodo tabs.query fosse sincrono, potrebbe avere un aspetto simile a quello riportato di seguito.
//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();
Questo approccio non funzionerà perché query() è asincrono. Viene restituito senza attendere il completamento del lavoro e non restituisce un valore. Un metodo è asincrono quando il parametro di callback è
disponibile nella sua firma.
// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)
Per eseguire correttamente una query su una scheda e aggiornarne l'URL, l'estensione deve utilizzare il parametro di callback.
//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();
Nel codice precedente, le righe vengono eseguite nel seguente ordine: 1, 4, 2. Viene chiamata la funzione di callback
specificata per query() e poi viene eseguita la riga 2, ma solo dopo che sono disponibili le informazioni sulla
scheda attualmente selezionata. Ciò avviene qualche tempo dopo il ritorno di query(). Sebbene
update() sia asincrono, il codice non utilizza un parametro di callback, poiché l'estensione non fa
nulla con i risultati dell'aggiornamento.
// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()
Questo metodo restituisce in modo sincrono l'URL come string e non esegue altre operazioni asincrone.
Altri dettagli
Per saperne di più, consulta la documentazione di riferimento dell'API Chrome e guarda il seguente video.
Comunicazione tra le pagine
Spesso i diversi componenti di un'estensione devono comunicare tra loro. Pagine HTML diverse
possono trovarsi a vicenda utilizzando i metodi chrome.extension, ad esempio getViews()
e getBackgroundPage(). Una volta che una pagina ha un riferimento ad altre pagine di estensione, la prima può
richiamare funzioni sulle altre pagine e manipolare i relativi DOM. Inoltre, tutti i componenti dell'estensione possono accedere ai valori archiviati utilizzando l'API storage e comunicare tramite il passaggio di messaggi.
Salvataggio dei dati e modalità di navigazione in incognito
Le estensioni possono salvare i dati utilizzando l'API storage, l'API web storage HTML5 o effettuando richieste al server che comportano il salvataggio dei dati. Quando l'estensione deve salvare qualcosa, valuta innanzitutto se proviene da una finestra di navigazione in incognito. Per impostazione predefinita, le estensioni non vengono eseguite nelle finestre di navigazione in incognito.
La modalità di navigazione in incognito promette che la finestra non lascerà tracce. Quando gestiscono dati provenienti da finestre di navigazione in incognito, le estensioni devono rispettare questa promessa. Se un'estensione normalmente salva la cronologia di navigazione, non salvare la cronologia delle finestre di navigazione in incognito. Tuttavia, le estensioni possono memorizzare le preferenze delle impostazioni da qualsiasi finestra, in incognito o meno.
Per rilevare se una finestra è in modalità di navigazione in incognito, controlla la proprietà incognito dell'oggetto
tabs.Tab o windows.Window pertinente.
function saveTabData(tab) {
if (tab.incognito) {
return;
} else {
chrome.storage.local.set({data: tab.url});
}
}
Fai un passo avanti
Dopo aver letto la panoramica e completato il tutorial Per iniziare, gli sviluppatori dovrebbero essere pronti per iniziare a scrivere le proprie estensioni. Approfondisci il mondo di Chrome personalizzato con le seguenti risorse.
- Scopri le opzioni disponibili per il debug delle estensioni nel tutorial sul debug.
- Le estensioni di Chrome hanno accesso a potenti API che vanno oltre a quelle disponibili sul web aperto. Il pattern chrome.* La documentazione delle API illustra ogni API.
- La panoramica dello sviluppo delle estensioni contiene decine di link aggiuntivi a parti di documentazione pertinenti per la creazione di estensioni avanzate.