In questo articolo pubblichiamo una videoguida di Giovanni Albero, CEO e CO-founder di SMarT. Più precisamente il suo intervento al Web Marketing Festival del 2019. Dove vengono illustrare le basi per sviluppare una Chrome exstension e come manterla in modo efficiente. Questo intervento è datato, ma può essere un punto di partenza per tutti coloro che vogliono costruire la propria Chrome Exstension.

Cos’è una Chrome Exstension?

Le estensioni di Chrome sono programmi che possono modificare e migliorare la funzionalità di Chrome. Possono agire come strumenti di produttività, come ad esempio bloccare certi siti web o mostrare notifiche personalizzate, oppure possono aggiungere funzionalità come giochi, temi e altro ancora.

Sono quindi programmi che offrono una grande varietà di funzionalità e per questo motivo sono molto apprezzate dagli utenti di Chrome.

Come costruire una Chrome Exstension?

Con questo intervento voglio mostravi come costruire una vostra Chrome Exstension e quali strumenti utilizzare. Soprattutto per affrontare qualche problematica che potresti incontrare e soprattutto come fare per mantenerle mantenibili.

Struttura base di una Chrome Exstension

Il primo file che ha una Chrome Exstension è un file manifest.json che ha 3 parametri obbligatori:

  • il nome della Chrome Exstension
  • la versione, in quanto andremo poi a rilasciarne nel futuro diverse versioni
  • la versione del manifest, che tendenzialmente è sempre 2

Una volta scritto e salvato sei a posto.

Crea il contentscript js

Il secondo file di cui hai bisogno è il contentscript.js. Un semplice programma che ha il vantaggio e lo svantaggio di essere presente solo nella pagina che stiamo visitando.

Quindi posso interagire con la mia pagina Facebook, Twitter o GitHub. Il mio codice js può quindi interagire con il DOM ma anche con tutto il suo ambiente, attraverso uno scambio di messaggi.

Crea il background.js

Il terzo file di cui hai bisogno è il background.js che è un come dice il nome agisce in background. Quindi lo ritroviamo non nella DOM della pagina ma dietro le quinte. E lui è lì, in attesa di messaggi e fondamentalmente non fa nulla fino a quando noi non andiamo a svegliarlo.

Questo può essere utile quando devo fare delle chiamate API a server diversi da quelli della pagina questo visitando. Perché c’è un discorso di protezione e non potrei fare una chiamata API da contentscript.js

Crea un quarto file, o meglio un gruppo di 3 file

Il prossimo passaggio è la creazione di altri tre file che devono lavorare in gruppo.

  • popup.js
  • popup.html
  • style.css

popup.js

popup.js è il programma che si esegue quando si clicca sull’icona dell’estensione nella barra di Chrome. Quindi molto banalmente andrà ad aprire un file html.

(

“name”: “SMarT”,

“version”: “0.1”,

“manifest_version”: 2,

“browser_action”: ( “default_popup: “popup.html” )

)

popup.html

Questo ovviamente è il file che si aprirà quando verrà cliccata l’icona dell’estensione. In questa pagina potete linkare il vostro style.css

SMarT Strategy

style.css

In questo file potete mettere tutto il vostro stile per rendere personalizzabile e graficamente carino il vostro popup quando questo si aprirà.

Ricapitolando

Quindi per ricapitolare avremo che

  • contentscript.js interagisce direttamente col DOM
  • i messaggi di contentscript.js possono interagire con background.js e con popup.js

Quindi una Chrome Exstension in sè è molto semplice, avrò 5 massimo 6 file da scrivere.

Come vedere se tutto funziona?

Per vedere se tutto funziona andate nella barra delle estensioni e cliccate sopra il tasto a forma di pezzo di puzzle. Una volta cliccato quello andate su “gestisci estensioni” e poi, in alto a destra attivare la “modalità sviluppatore”.

Una volta attivata cercate sulla destra il pulsante “Carica estensione non pacchettizzata”, e scegliete la cartella che contiene tutti i vostri file che avete creato finora.

Importante è che nella cartella sia presente il file manifest.json perchè è tramite quello che riesce a capire quali file deve utilizzare. Una volta caricato siete a posto. Ovviamente la vostra estensione non farà nulla e dovrete ora voi scrivere il vostro codice per fare quello che vi serve di più.

Come mantenere una Chrome Exstension?

Ovviamente se il codice è poco e le feature richieste all’estensione sono ridotte non dovreste avere problemi. Ma se invece l’estensione inizia ad essere più complessa allora il vostro file inizierà ad avere migliaia di righe di codice. E rimetterci mano dopo qualche mese (o anno) potrebbe risultare parecchio complesso.

Yarn e Webpack per ordinare il codice di una Chrome Exstension

Nel mio caso specifico avevo da una parte il bisogno di organizzare il codice, dall’altra la necessità di usare dipendenze, in quanto utilizzavo anche risorse esterne (nello specifico un jquery) che poteva interagire male con siti che già lo utilizzavano.

Ho quindi deciso di usare Yarn e Webpack. Se sei arrivato fin qui e vuoi andare oltre, molto probabilmente allora sei un programmatore e questi nomi non ti sono del tutto nuovi.

Per questo ti invito a tornare al video postato all’inizio al minuto 7’20 per poter vedere direttamente come ho risolto i miei problemi di sviluppo e avere così un codice più ordinato e semplice da mantenere.