Advertisement
  1. Code
  2. Tools & Tips
Code

Sviluppo di estensioni di Google Chrome

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Francesco (you can also view the original English article)

Non è un segreto che il mio browser preferito è Google Chrome. Mi piace perché è veloce, affidabile, non va in crash (molto spesso) e sembra buono. C'è anche il qualcos'altro che trovo ancora più prezioso. È il fatto che si può costruire un'estensione utilizzando solo HTML, CSS e JavaScript. Sostengo sempre tali prodotti, prodotti che sono aperti alla comunità e Chrome sembra essere uno di questi prodotti. Se avete bisogno di qualcosa e non è stato ancora implementato, siete liberi di svilupparlo voi stessi.

Quindi alla fine di questo articolo troverete un'estensione Chrome funzionante che utilizza la maggior parte delle tecniche illustrate di seguito. È possibile scaricare l'esempio finale utilizzando il pulsante di codice sorgente download nella parte superiore di questa pagina.


Perché si dovrebbe scrivere la propria estensione

Incoraggio sempre le persone ad utilizzare strumenti migliori per accelerare il loro flusso di lavoro. Il software che usiamo dovrebbe aiutarci, non dovremmo lottare con esso. Lo sviluppo di estensioni/plugin per il tuo editor preferito o browser aiuta non solo voi, ma anche altri programmatori, che prima o poi saranno nella stessa situazione. Se manca qualcosa, si può costruire da soli e con Chrome, questo è veramente facile. Modellare l'ambiente in base alle vostre esigenze è la chiave per essere altamente produttivi.


Sviluppare e testare le vostre estensioni

Per fortuna c'è un modo per testare l'estensione senza la necessità di caricarlo sul Chrome web Store. Nella barra degli indirizzi del tuo browser, basta digitare:

Assicuratevi di abilitare la modalità sviluppatore e cliccare il pulsante Load unpacked extension.... Poi basta selezionare la cartella dal disco rigido che contiene i file dell'estensione.

extensionspanel

Architettura

Ecco un diagramma dell'architettura per un'estensione di Chrome:

architecture

E ora diamo un'occhiata più da vicino ogni elemento all'interno dell'architettura.

Manifesto

Il punto di ingresso dell'estensione è il file manifest.json. Deve contenere un oggetto JSON valido. Per esempio:

Le proprietà richieste sono name, version e manifest_version. La version può essere da uno a quattro numeri separati da punti. È qualcosa che viene utilizzato dal sistema di aggiornamento automatico di Google. Ecco come sa quando aggiornare la vostra estensione. Il valore del manifest_version dovrebbe essere il valore 2.

Il manifesto può contenere altre proprietà a seconda del tipo di estensione di cui abbiamo bisogno, ma descriverò solo quelli che trovo più interessanti.

Pagine di sfondo

Ogni estensione ha una pagina di sfondo invisibile che viene eseguita dal browser. Ci sono due tipi - pagine evento e pagine di sfondo persistente. Il primo è attivo tutto il tempo. Il secondo è attivo solo quando è necessario. Google incoraggia gli sviluppatori ad utilizzare pagine di eventi, perché questo consente di risparmiare memoria e migliora le prestazioni complessive del browser. Tuttavia, è bene sapere che questo è anche dove si dovrebbe mettere la logica principale e l'inizializzazione. Normalmente lo sfondo pagina/script interpreta il ruolo di ponte tra le altre parti dell'estensione.

Ecco come si dovrebbe descrivere nel manifesto:

Come avrete intuito, se la proprietà persistent è false, si sta utilizzando pagine di evento. In caso contrario, si sta lavorando con una pagina di sfondo persistente.

Content Script

Se devi accedere al DOM della pagina corrente, quindi è necessario utilizzare un content script. Il codice viene eseguito all'interno del contesto della pagina web corrente, il che significa che verrà eseguito con ogni aggiornamento. Per aggiungere uno script, utilizzare la seguente sintassi.

Tenete presente che il valore matches determina per quali pagine verrà utilizzato lo script. Per saperne di più sui modelli di match clicca qui.

Interfaccia utente

Ci sono diversi modi per costruire l'interfaccia utente dell'estensione. Qui le quattro più popolari.

Azione del browser

La maggior parte degli sviluppatori utilizza la proprietà browser_action per costruire il loro plugin. Una volta impostato, un'icona che rappresenta l'estensione si troverà sul lato destro della barra degli indirizzi. Gli utenti possono quindi fare clic sull'icona e aprire un pop-up che è effettivamente il contenuto HTML controllato da voi.

browseraction

Il file manifest deve contenere i seguenti dati:

default_title è un piccolo tooltip che viene mostrato quando l'utente passa il mouse sopra l'icona. default_popup è il file HTML che viene caricato all'interno del pop-up. C'è anche un badge che può essere posizionato sopra l'icona. È possibile farlo all'interno del vostro script di background. Per esempio:

Questo è il codice che ho usato per produrre l'immagine qui sopra.

Page action

La proprietà page_action è simile alla browser action, ma l'icona è visualizzata all'interno della barra degli indirizzi:

pageaction

La cosa interessante è che l'icona è nascosta inizialmente, quindi si dovrebbe decidere quando farla vedere. Ad esempio, nell'immagine sopra, l'icona RSS verrà visualizzato solo se la pagina corrente contiene un link al feed RSS. Se avete bisogno di visualizzare l'icona tutto il tempo, è bene utilizzare browser_action direttamente.

Per aggiungere l'azione di pagina, digitare il seguente codice all'interno del vostro manifesto:

A differenza dell'icona dell'azione browser, l'icona dell'azione pagina non ha badge.

DeveloperTools

Io uso molto DeveloperTools ed è bello che Chrome offra un metodo per l'aggiunta di nuove schede per questi strumenti. La prima cosa che si dovrebbe fare è aggiungere una pagina HTML che verrà caricata quando il pannello è aperto:

Non c'è nessun bisogno di mettere HTML all'interno della pagina, fatta eccezione per il collegamento a un file JavaScript, che creerà la scheda:

E quindi includere il seguente codice all'interno del file devtools.js:

Ora il codice sopra aggiungerà una nuova scheda con il nome di TheNameOfYourExtension e dopo aver fatto clic su di esso il browser caricherà index.html all'interno del DeveloperTools.

Omnibox

La omnibox è la parola chiave che viene mostrata all'interno della barra degli indirizzi di Chrome. Ad esempio, se si aggiunge la proprietà seguente al manifesto:

E quindi aggiungere il codice riportato di seguito, all'interno del vostro script di sfondo:

Si dovrebbe essere in grado di digitare yeah all'interno della barra di indirizzo. Poi si dovrebbe vedere qualcosa come questo:

omnibox

Premere tab produrrà la seguente schermata:

omnibox2

Naturalmente utilizzando l'API chrome.omnibox, si potrebbe prendere l'input dell'utente e reagire a quell'input.

APIs

Ci sono molte cose diverse che si possono fare nella vostra estensione. Ad esempio, è possibile ottenere accesso ai segnalibri o alla cronologia dell'utente. È possibile spostare, creare schede o anche ridimensionare la finestra principale. Raccomando caldamente di consultare la documentazione per ottenere una migliore idea di come eseguire queste attività.

Quello che dovete sapere è che non tutte le API sono disponibili in ogni parte dell'estensione. Ad esempio, il content script non può accedere a chrome.devtools.panels o lo script nella tua scheda di DeveloperTools non può leggere il Dom della pagina. Così, se ti stai chiedendo perché qualcosa non funziona, questo potrebbe essere il motivo.

Messaggistica

Come accennato in precedenza, non avete sempre accesso all'API che desiderate utilizzare. Se questo è il caso, quindi è necessario utilizzare il passaggio dei messaggi. Ci sono due tipi di messaggistica - una one-time per le richieste e una per connessioni long-lived.

Richieste one-time

Questo tipo di comunicazione si verifica solo una volta. Ad esempio Potete inviare un messaggio e attendere una risposta. Ad esempio, si potrebbe inserire il codice seguente nel vostro script di sfondo:

Quindi utilizzare il codice seguente nel content script:

E questo è come si possono ottenere informazioni sul DOM della pagina corrente e utilizzarlo all'interno del vostro script di sfondo, che normalmente non hanno accesso a questi dati.

Connessioni long-lived

Utilizzate questo tipo di messaggistica se avete bisogno di un canale di comunicazione persistente. All'interno del tuo content script inserite il codice seguente:

E quindi nello script di sfondo, utilizzate questo:

Eseguire l'override di pagine

L'override delle pagine è un bel modo per personalizzare il tuo browser. Potete anche sostituire alcune delle pagine predefinite in Chrome. Ad esempio è possibile creare la propria pagina della cronologia. A tale scopo, aggiungere il seguente frammento di codice:

I valori possibili di <page to override> sono i bookmarks, history e newtab. È cool avere una nuova pagina new tab.


Un'estensione di esempio

Per concludere questo articolo ho deciso di inserire un semplice esempio, così è possibile ottenere una migliore comprensione dell'intero quadro. Questa estensione di esempio utilizza la maggior parte delle cose che ho descritto sopra semplicemente per impostare un colore di sfondo #F00 per tutti i div nella pagina corrente. Sentitevi liberi di scaricare il codice sorgente utilizzando il pulsante nella parte superiore di questo articolo.

Il File manifesto

Naturalmente ho iniziato con il file manifest:

Tenete a mente che è possibile organizzare i file in cartelle. Inoltre, prestate attenzione alla proprietà version. È necessario aggiornare questa proprietà ogni volta che si desidera caricare l'estensione nell'archivio web.

Script di sfondo

Le prime righe recuperano l'azione dell'utente dalla omnibox. Dopo di che, ho impostato un listener di richieste one-time, che accetterà il messaggio dall'icona di azione del browser.

Il prossimo snippet è un collegamento long-lived con la scheda devtools (non è assolutamente necessario utilizzare una connessione long-lived per questo, l'ho fatto solo a fini di esempio). Utilizzando questi listeners, sono in grado di ottenere l'input dall'utente e inviarlo allo script content, che ha accesso agli elementi DOM. Il punto chiave qui è stato in primo luogo selezionare la scheda che ho voluto manipolare e quindi inviare un messaggio ad essa. Infine, ho messo un badge sull'icona dell'estensione.

Azione del browser

Iniziamo con il nostro file popup.html:

Poi creiamo il file popup.js:

Il pop-up contiene un solo pulsante e una volta che l'utente vi fa clic sopra, invia un messaggio allo script di sfondo.

Developertools

Per la DeveloperTools, stiamo facendo quasi la stessa cosa qui come abbiamo fatto nella finestra a comparsa, l'unica differenza è che ho usato una connessione long-lived.

Content Script

Lo script content è in attesa di un messaggio, seleziona tutti i div nella pagina corrente e cambia il loro colore di sfondo. Prestate attenzione all'oggetto a cui ho attaccato il listener. Nello script content è chrome.extension.onMessage.

Personalizzare la pagina New Tab

L'ultima cosa che fa questa estensione è personalizzare la pagina new tab. Possiamo farlo facilmente solo puntando la proprietà newtab al file newtab/newtab.html:

Tenete a mente che non è possibile creare una replica della pagina new tab predefinita. L'idea di questa funzione consiste nell'aggiungere una funzionalità completamente nuova. Ecco quello che Google dice:

Non cercare di emulare la pagina nuova scheda predefinita. L'API necessaria per creare una versione leggermente modificata della pagina nuova scheda predefinita — con prime pagine, pagine chiuse recentemente, suggerimenti, un immagine di sfondo del tema e così via — non esistono ancora. Fino a quando non saranno disponibilli, meglio cercare di fare qualcosa di completamente diverso.


Il debug

Scrivere un'estensione per Google Chrome non è sempre un compito facile e probabilmente ti imbatterai in alcuni problemi. La cosa buona è che è sempre possibile utilizzare la console per facilitare il debug. Sentitevi liberi di aggiungere console.log nel tuo sfondo o nel content script. Tuttavia questo non funzionerà in script che vengono eseguiti nel contesto degli strumenti di sviluppo, in tal caso è possibile utilizzare il metodo alert, che funziona ovunque.


Conclusione

A mio parere, Chrome è uno dei migliori browser disponibili. Gli sviluppatori di Google rendono la creazione di estensioni relativamente facile e ci hanno dato il potere di crearli in HTML, CSS e JavaScript.

Sì, ci sono alcune parti difficili, ma in genere siamo in grado di produrre utili plugin. Tenete a mente che questo articolo non copre tutto ciò che riguarda lo sviluppo di estensioni di Chrome. Ci sono alcune altre cose utili come menu di scelta rapida, le pagine di opzioni e le notifiche. Per gli argomenti che non analizzo, consultate la documentazione per informazioni più dettagliate.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.