Architettura e tecnologie di un’estensione Chrome: Engeene Keep Up

Di - 5 December 2013 - in
Post image for Architettura e tecnologie di un’estensione Chrome: Engeene Keep Up

Partendo dal presupposto che un’estensione per browser è un qualcosa che permette di aggiungere delle funzionalità senza addentrarsi troppo in profondità nel codice nativo, la maggior parte dei lettori non avrà molta difficoltà a capirne quantomeno la struttura. Coloro i quali, infatti, hanno dimestichezza con lo sviluppo di applicazioni web e l’utilizzo di relative tecnologie comprenderanno abbastanza rapidamente il codice.
Un’estensione è sostanzialmente una pagina web e come tale è composta dai seguenti file:

  • Un file Manifest
  • Uno o più file HTML
  • Uno o più file JavaScript (opzionali)
  • Qualsiasi altro file necessario, per esempio i CSS e le immagini (opzionali)

FILE MANIFEST

La cosa più importante è il file Manifest, chiamato manifest.json. Questi non è niente di più che un insieme di proprietà formattate con sintassi json. Ad alto livello viene usato per dichiarare a Chrome cosa fa l’estensione e quali permessi richiede. Nello specifico il nostro file Manifest contiene:

  1. La versione del file Manifest, rappresentata dall’attributo manifest_version. Google consiglia di utilizzare la versione 2 del file manifest in quanto la prima versione è ormai vecchia e deprecata.
  2. Una breve descrizione, rappresentata dall’attributo description.
  3. La versione dell’estensione, rappresentata dall’attributo version.
  4. Il nome dell’estensione, rappresentato dall’attributo name.
  5. Il gruppo delle icone, rappresentato dall’attributo icons, contenente un set di icone che dovrebbero generalmente essere in formato PNG, perché ha il miglior supporto per la trasparenza. Sono comunque supportati anche altri formati come BMP, GIF, ICO e JPEG. Le immagini fornite dovrebbero avere le dimensioni 16×16, 48×48 e 128×128, in quanto sono utilizzate durante l’installazione per il Chrome Web Store e nella pagina della gestione dell’estensioni del proprio browser Chrome, raggiungibile dal menù Strumenti -> Estensioni.
  6. L’attributo browser_action contenente l‘icona dell’estensione, che verrà aggiunta di fianco alla barra degli indirizzi di Chrome e che rappresenta fisicamente l’accesso all’estensione, il title che compare come tooltip quando si va sopra col mouse sull’icona, ed infine la pagina html che viene renderizzata al click sull’icona, rappresentata dall’attributo default_popup.
  7. L’attributo permissions in cui vengono elencate le risorse alle quali l’estensione ha necessità di accedere. In questo caso il feed XML, raggiungibile all’indirizzo http://www.engeene.it/feed/, dove recuperare gli articoli e le relative informazioni.

TECNOLOGIE IMPIEGATE

Dal punto di vista tecnologico abbiamo deciso di utilizzare diversi framework e specifiche. Al fine di scrivere il codice in modo più semplice e veloce, ci siamo avvalsi di un utile framework Javascript molto conosciuto nel panorama delle applicazioni web: jQuery. Allo stesso modo, per realizzare alcuni effetti grafici abbiamo optato per un framework che offrisse la stessa semplicità e versatilità, e che si “sposasse” bene con jQuery. La scelta, ovviamente, è ricaduta su jQueryUI. Per ridurre al minimo le dimensioni del file, inoltre, per quest’ultimo framework sono stati inglobati solo quelli effetti di cui si aveva realmente bisogno.

Per quanto concerne la gestione degli articoli preferiti, invece, era necessario servirsi di un meccanismo, o meglio di una specifica, che permettesse di memorizzare localmente ed in modo persistente degli oggetti per soddisfare i requisiti dei dati off-line delle applicazioni web. A tal proposito il W3C ha definito un modo attraverso cui è possibile effettuare una gestione avanzata dei dati rappresentati da coppie chiave-valore, implementando inoltre una ricerca efficiente sui valori ed una memorizzazione di valori duplicati per una chiave. Tale specifica utilizzata va sotto il nome di Indexed Database.

ARCHITETTURA

Il progetto, oltre che dal file manifest.json sopra descritto, è composto da:

  • Il file eku.html, rappresentante la pagina che viene richiamata al click sull’icona dell’estensione e che sostanzialmente è un container.
  • Il file eku.css, contenente gli stili dei vari elementi creati.
  • Quattro file javascript, di cui due realizzano la logica dell’estensione (eku.jsindexedDB.js), mentre gli altri due sono le librerie jQuery e jQueryUI, rispettivamente nelle versioni 1.9.1 e 1.10.3.
  • Un insieme di file .png

Il cuore dell’estensione è rappresentato dai file eku.js e indexedDB.js.
Il file indexedDB.js, come suggerisce il nome, si occupa della gestione completa del database. Contiene appunto i metodi per la creazione del db Engeene e della tabella favoriteArticle (in cui vengono memorizzate le informazioni degli articoli), dell’inserimento e rimozione di un articolo tra i preferiti, del recupero di tutti gli articoli memorizzati e dell’esistenza di un articolo tra i preferiti.
Il file eku.js, invece, a fronte di una chiamata ajax iniziale con cui va a recuperare il file xml dal blog, contenente appunto gli articoli, si occupa della creazione e gestione dei vari snippet di articoli sia nella schermata Home che in quella dei Preferiti.

SORGENTI

Sin dalle prime fasi del progetto abbiamo pensato di coinvolgere in prima persona i nostri followers, subito dopo il rilascio della prima release stabile.
Abbiamo infatti deciso di rendere il progetto open e rilasciare i codici sorgenti sotto licenza GPL v2 o superiore.
Perciò coloro che volessero partecipare in modo attivo al progetto Engeene Keep Up proponendo nuovi sviluppi da sottoporre al team, correggere eventuali bug o semplicemente seguire più da vicino lo stato avanzamento del progetto, possono trovare i sorgenti sulla nota piattaforma di versioning Github.

Fabrizio Variano Articolo scritto da

Laureato e specializzato in Informatica con il massimo dei voti, lavora come Software engineer con compiti di team leading progettando e sviluppando soluzioni in ambito web con tecnologie Java e “dintorni”.
Grande appassionato di tecnologia, negli ultimi anni si è avvicinato all’ambito mobile, sia hardware che software, con l’intento di far suo questo mondo affascinante.
Oltre a viaggiare, tra i suoi hobby ci sono: la moto, la cucina ed il cinema.

Contatta l'autore

Previous post:

Next post: