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 vengono create utilizzando la tecnologia web e possono usare le stesse API che il browser fornisce al web aperto.
Le estensioni hanno un'ampia gamma di possibilità funzionali. Possono modificare i contenuti web visualizzati e interagire con gli utenti oppure estendere e modificare il comportamento del browser stesso.
Considera le estensioni come gateway per rendere il browser Chrome il browser più personalizzato.
File estensione
Le estensioni variano in base ai tipi di file e al numero di directory, ma è necessario che tutti dispongano di un file [manifest][docs-manifest]. Alcune estensioni basilari, ma utili, possono essere costituite solo dal file manifest e dalla relativa icona nella 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 che si trova nella barra degli strumenti del browser. Le icone della barra degli strumenti consentono un facile accesso e informano gli utenti delle estensioni installate. La maggior parte degli utenti interagirà con un'estensione che utilizza un popup facendo clic sull'icona.
Questa estensione Avvisi email di Google utilizza un'azione nel browser:
Questa estensione di Mappy utilizza un'azione di pagina e uno script di contenuti:
Fare riferimento ai file
È possibile fare riferimento ai file di un'estensione utilizzando un URL relativo, proprio come i file in una normale pagina HTML.
<img src="images/my_image.png">
Inoltre, ogni file è accessibile anche tramite 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 corrisponde alla 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. In particolare, l'ID di un'estensione non pacchettizzata cambia se l'estensione viene caricata da una directory diversa e cambia 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 impostare l'ID come hardcoded durante lo sviluppo.
Architettura
L'architettura di un'estensione dipende dalla sua funzionalità, ma molte estensioni efficaci includeranno più componenti:
Script in background
Lo script in background è il gestore di eventi dell'estensione; contiene listener per gli eventi del browser importanti per l'estensione. Rimane inattivo fino a quando un evento viene attivato e segue la logica indicata. Uno script in background efficace viene caricato solo quando è necessario e viene scaricato quando diventa inattivo.
Elementi UI
L'interfaccia utente di un'estensione deve essere mirata e minima. La UI 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 relativa alla pagina, ma può contenere altre forme di UI, ad esempio menu contestuali, utilizzo della omnibox o creazione di una scorciatoia da tastiera.
Le pagine dell'interfaccia utente delle estensioni, ad esempio i popup, possono contenere pagine HTML ordinarie con logica JavaScript. Le estensioni possono anche chiamare tabs.create o window.open() per visualizzare
i file HTML aggiuntivi presenti nell'estensione.
Un'estensione che utilizza un'azione della pagina e un popup può utilizzare l'API declarative content per impostare regole nello script in background per quando il popup è disponibile per gli utenti. Quando le condizioni sono soddisfatte, lo script dello sfondo comunica con il popup per rendere l'icona cliccabile per gli utenti.
Script di contenuti
Le estensioni che leggono o scrivono in pagine web utilizzano uno script di contenuti. Lo script dei contenuti contiene JavaScript che viene eseguito nei contesti di una pagina caricata nel browser. Gli script di contenuti leggono e modificano il DOM delle pagine web visitate dal browser.
Gli script di contenuti possono comunicare con l'estensione principale scambiando messaggi e memorizzando valori tramite l'API storage.
Pagina 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 abilitare le funzionalità e consentire agli utenti di scegliere quale funzionalità è pertinente alle loro esigenze.
Utilizzo delle API di Chrome
Oltre ad avere accesso alle stesse API delle pagine web, le estensioni possono usare anche API specifiche delle estensioni che creano una stretta integrazione con il browser. Le estensioni e le pagine web possono accedere al metodo window.open() standard per aprire un URL, ma le estensioni possono specificare in quale finestra deve essere visualizzato l'URL utilizzando il metodo tabs.create dell'API di Chrome.
Metodi asincroni e sincroni
La maggior parte dei metodi dell'API di Chrome sono asincroni: tornano immediatamente senza attendere il completamento dell'operazione. Se un'estensione deve conoscere il risultato di un'operazione asincrona, può passare una funzione di callback al metodo. Il callback viene eseguito più tardi, potenzialmente molto più tardi, dopo il ritorno del metodo.
Se l'estensione doveva passare a un nuovo URL nella scheda attualmente selezionata dall'utente, dovrebbe 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 l'aspetto seguente.
//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();
Questo approccio non andrà a buon fine perché query() è asincrono. Restituisce un valore senza attendere il completamento
dell'operazione e non restituisce un valore. Un metodo è asincrono quando il parametro di callback è disponibile nella firma.
// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)
Per eseguire correttamente query su una scheda e aggiornare l'URL, l'estensione deve utilizzare il parametro 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. La funzione di callback specificata in query() viene chiamata ed esegue la riga 2, ma solo dopo che sono disponibili informazioni sulla scheda attualmente selezionata. Questo accade qualche tempo dopo il ritorno di query(). Sebbene update() sia asincrono, il codice non utilizza un parametro di callback, in quanto 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 ulteriori informazioni, esplora la documentazione di riferimento sull'API di Chrome e guarda il seguente video.
Comunicazione tra pagine
Spesso i diversi componenti di un'estensione devono comunicare tra loro. Pagine HTML diverse
possono trovarsi a vicenda utilizzando i metodi chrome.extension, come getViews()
e getBackgroundPage(). Una volta che una pagina ha un riferimento ad altre pagine di estensioni, 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 attraverso la trasmissione di messaggi.
Salvataggio dei dati e modalità di navigazione in incognito
Le estensioni possono salvare i dati utilizzando l'API di archiviazione, l'API di archiviazione web 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 lascia tracce. Quando gestiscono i dati delle finestre di navigazione in incognito, le estensioni devono rispettare questa promessa. Se normalmente un'estensione salva la cronologia di navigazione, non salvarla dalle finestre di navigazione in incognito. Tuttavia, le estensioni possono memorizzare le preferenze di impostazione 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 il prossimo passo
Dopo aver letto la panoramica e completato il tutorial Guida introduttiva, gli sviluppatori dovrebbero essere pronti a iniziare a scrivere le proprie estensioni. Immergiti ancora di più nel mondo di Chrome personalizzato con le risorse che seguono.
- Scopri le opzioni disponibili per il debug delle estensioni nel tutorial di debug.
- Le estensioni di Chrome hanno accesso a potenti API ben oltre a quelle disponibili sul web aperto. Il dispositivo chrome.* nella documentazione delle API sarà spiegato in dettaglio come fare per ciascuna API.
- La panoramica dello sviluppo delle estensioni contiene decine di link aggiuntivi a documenti pertinenti alla creazione avanzata di estensioni.