Panoramica dell'architettura

Le estensioni sono pacchetti compressi di HTML, CSS, JavaScript, immagini e altri file utilizzati sul web che personalizzano l'esperienza di navigazione su Google Chrome. Le estensioni vengono create utilizzando e possono utilizzare le stesse API che il browser mette a disposizione sul web aperto.

Le estensioni offrono una vasta gamma di possibilità funzionali. Possono modificare i contenuti web visualizzati e interagire o estendere e modificare il comportamento del browser stesso.

Considera le estensioni come gateway per rendere il browser Chrome il più personalizzato.

File delle estensioni

Le estensioni variano in base al tipo di file e alla quantità di directory, ma tutte devono avere un [manifest][docs-manifest]. Alcune estensioni di base ma utili possono essere costituite soltanto dal file manifest e la 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 nella barra degli strumenti del browser. Le icone della barra degli strumenti consentono di accedere facilmente e per informare gli utenti di quali estensioni sono installate. La maggior parte degli utenti interagirà con un'estensione che utilizza un popup facendo clic sull'icona.

Questa estensione di Google Avvisi email utilizza un'azione nel browser:

Uno screenshot dell'estensione Google Avvisi email

Questa estensione Mappy utilizza un'azione e dei contenuti relativi alla pagina script:

Uno screenshot dell'estensione Mappy

Riferimento ai file

È possibile fare riferimento ai file di un'estensione utilizzando un URL relativo, così come i file in un normale codice HTML .

<img src="images/my_image.png">

Inoltre, ogni file è accessibile anche utilizzando un URL assoluto.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

Nell'URL assoluto, EXTENSION_ID è un identificatore univoco utilizzato dal sistema di estensione generate 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 nel campo cartella principale dell'estensione; corrisponde all'URL relativo.

Mentre lavori su un'estensione non pacchettizzata, l'ID estensione può cambiare. In particolare, l'ID di un un'estensione non pacchettizzata cambia se viene caricata da una directory diversa; l'ID cambiarla quando l'estensione viene pacchettizzata. Se il codice di un'estensione si basa su un URL assoluto, puoi usare il metodo chrome.runtime.getURL() per evitare l'hardcoded dell'ID durante sviluppo del prodotto.

Architettura

L'architettura di un'estensione dipenderà dalla sua funzionalità, ma molte estensioni solide Includono 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 finché non viene attivato un evento esegue la logica indicata. Uno script in background efficace viene caricato solo quando è necessario e viene scaricato quando diventa inattivo.

Elementi UI

L'interfaccia utente dell'estensione deve essere minima e mirata. L'UI deve personalizzare migliorare l'esperienza di navigazione senza distrarre da ciò che è davvero importante. La maggior parte delle estensioni dispone di un browser o azione pagina, ma può contenere altre forme di UI, ad esempio menu contestuali, l'utilizzo della omnibox o la creazione di una scorciatoia da tastiera.

Le pagine dell'interfaccia utente delle estensioni, ad esempio un popup, possono contenere normali pagine HTML con JavaScript logica. Le estensioni possono anche chiamare tabs.create o window.open() per visualizzare file HTML aggiuntivi presenti nell'estensione.

Un'estensione che utilizza un'azione della pagina e un popup possono utilizzare il l'API content per impostare regole nello script in background per quando il popup viene disponibili per gli utenti. Quando le condizioni sono soddisfatte, lo script in background comunica con il popup per rendere l'icona cliccabile per gli utenti.

Una finestra del browser contenente un&#39;azione della pagina con un popup

Script di contenuti

Le estensioni che leggono o scrivono nelle pagine web utilizzano uno script dei contenuti. La content script contiene JavaScript che viene eseguito nel contesto di una pagina che è stata caricata il browser. Gli script dei contenuti leggono e modificano il DOM delle pagine web visitate dal browser.

Una finestra del browser con un&#39;azione sulla pagina e uno script di contenuti

Gli script di contenuti possono comunicare con l'estensione principale tramite lo scambio di messaggi e l'archiviazione dei valori tramite l'API storage.

Mostra un percorso di comunicazione tra lo script dei contenuti e l&#39;estensione principale

Pagina Opzioni

Così come le estensioni consentono agli utenti di personalizzare il browser Chrome, la pagina delle opzioni consente la personalizzazione dell'estensione. È possibile utilizzare le opzioni per attivare le funzionalità e consentire agli utenti di a scegliere le funzionalità più adatte alle loro esigenze.

Utilizzo delle API di Chrome

Oltre ad avere accesso alle stesse API delle pagine web, le estensioni possono anche utilizzare API specifiche delle estensioni che creano una stretta integrazione con il browser. 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 usando l'API Chrome tabs.create.

Metodi asincroni e sincroni

La maggior parte dei metodi dell'API di Chrome sono asincroni: vengono ripristinati immediatamente, senza attendere l'operazione per completare l'operazione. Se un'estensione deve conoscere il risultato di un'operazione asincrona, può passare di callback di Google nel metodo. Il callback viene eseguito in un secondo momento, potenzialmente molto più tardi, dopo restituiti dal metodo Method.

Se l'estensione aveva bisogno di passare dalla scheda attualmente selezionata dell'utente a un nuovo URL, doveva recuperare l'ID della scheda corrente e aggiornare l'indirizzo della scheda con il nuovo URL.

Se il metodo tabs.query era sincrono, il suo aspetto potrebbe essere simile al 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 riuscirà perché query() è asincrono. Ritorna senza aspettare il lavoro da completare e non restituisce alcun valore. Un metodo è asincrono quando il parametro di callback è disponibili nella sua firma.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

Per eseguire correttamente query su una scheda e aggiornare il relativo 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 riportato sopra, le linee vengono eseguite nel seguente ordine: 1, 4, 2. La funzione di callback specificato in query() viene richiamata e quindi esegue la riga 2, ma solo dopo le informazioni sul la scheda attualmente selezionata è disponibile. Questo accade qualche tempo dopo il ritorno di query(). Sebbene update() è asincrono. Il codice non utilizza un parametro di callback, poiché l'estensione non lo 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, consulta la documentazione di riferimento dell'API di Chrome e guarda quanto segue video.

Comunicazione tra pagine

Spesso i diversi componenti di un'estensione hanno bisogno di comunicare tra loro. Pagine HTML diverse possono trovarsi utilizzando i metodi chrome.extension, ad esempio getViews() e getBackgroundPage(). Se una pagina contiene un riferimento ad altre pagine di estensione, la prima può richiamare funzioni nelle altre pagine e manipolarne i DOM. Inoltre, tutti i componenti può accedere ai valori archiviati utilizzando l'API storage e comunicare tramite trasmissione di un messaggio.

Salvataggio dei dati e modalità di navigazione in incognito

Le estensioni possono salvare dati usando l'API storage, lo spazio di archiviazione sul web HTML5 API o effettuando richieste al server che comportano il salvataggio dei dati. Quando l'estensione salvare qualcosa, valuta se si tratta di una finestra di navigazione in incognito. Per impostazione predefinita, le estensioni non vengono eseguiti nelle finestre di navigazione in incognito.

La modalità di navigazione in incognito promette che la finestra non lascerà tracce. Quando si gestiscono i dati provenienti da finestre di navigazione in incognito, le estensioni devono rispettare questa promessa. Se normalmente un'estensione salva la navigazione , non salvare la cronologia delle finestre di navigazione in incognito. Tuttavia, le estensioni possono memorizzare preferenze da qualsiasi finestra, in incognito o meno.

Per rilevare se una finestra è in modalità di navigazione in incognito, controlla la proprietà incognito della notifica pertinente tabs.Tab o windows.Window.

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 Guida introduttiva, gli sviluppatori dovrebbero essere pronti a iniziare a scrivere le proprie estensioni. Immergiti ancora di più nel mondo della Chrome personalizzato con le seguenti risorse.