Il programma è composto di tre elementi principali, che sono necessari al logging dei dati:
- una chrome application
- una chrome extension
- una classe javascript iniettata nelle pagine visitate. Vienne chiamato injeted code o context script
Detto questo, il programma funziona sulla pagina correntemente visualizzata solo se:
- la pagina supporta la esecuzione di javascript (ad esempio il vecchio visualizzatore pdf non lo permetteva)
- la pagina supporta il code injection (ad esempio alcune pagine di internet banking non lo permetterebbero, bloccandosi quando viene rilevata la iniezione del codice).
Le singole parti comunicano tra loro facendo uso di un canale di message passing messo a disposizione dal browser (chrome.Message). Il canale funziona così:
- chi deve ricevere il messaggio deve dichiarare la esistenza di un ascoltatore (handler) che conosce le istruzioi che deve eseguire (puntatore a funzione, function pointer) quando riceve un messaggio. Una volta che è stato dichiarato, rimane in attesa della ricezione del messaggio.
- che deve inviare il messaggio chiama una funzione apposita che effettua l'invio dei dati, che verranno ricevuti dagli hendler in acolto.
Il message passing è di tipo broadcast, quindi un pacchetto inviato viene ricevuto da tutti gli handler in ascolto su quel canale. Il messaggio stesso deve contenere dei dati che permettano a chi lo riceve di capire se sono i destinatari del messaggio e su come lo devono gestire. I dati sono porzioni di memoria chiamate JSON o Javascript object notation. è un formato molto comune.
Nel diagramma le comunicazioni create in questo modo sono contraddistinte da una linea continua e una tratteggiata. I JSON sono contraddistinti da quei riquadri con {JSON, contenuto}
Da notare: ci sono due contesti di comunicazione usati in questa applicazione:
- comunicazione interna al browser usata da browser, extension e context script
- comunicazione esterna tra browser e application (usata per inviare i dati da extension a application). Context script e application non possono comunicare direttamente tra loro.
Il browser e le sue funzioni, come il message passing, sono invocabili con l'oggetto chrome. Usando la dot notation chrome.* si accede alle sue interfacce: sono chiamate api (application programming interface).
In particolare, il browser espone alle sole extensions (e quindi non alle application, che sono considerate elementi standalone separati dal browser di per sè) alcune informazioni di natura geometrica, come ad esempio il numero di finestre (window) aperte e la loro posizione e dimensione su schermo. Per ogni window sono specificate anche le tabs contenute, quali sono attive, url e geometria (che conincde con quella della window).
Il browser espone altre api particolari, come ad esempio la chrome.storage che permette di salvare su disco dei dati e la accessibilità a questi dati è relativa al contesto (ovvero la porzione di memoria acceduta dalla chrome application non è la stessa della chrome extension). I dati assumono a loro volta la forma di JSON.
Un ultima api usata da noi è quella che è in grado di fare lo screen recordin (chrome.screenRecorder se non ricordo male).
Quindi in definitiva noi abbiamo usato le seuenti api:
chrome.windowchrome.tabschrome.message(non mi ricordo se si chiama così)chrome.screenRecorderchrome.storage
Il context script è un elemento che viene iniettato dalla chrome extension all'interno della pagina quando il suo caricamento (qui va chiamato onload, è importante) è completato. Sarebbe meglio dire: iniettato e eseguito all'esecuzione dell'evento onload da parte della pagina visualizzata.
Il context script contiene una serie di handler per gli eventi di mouse e tastiera, eseguiti a livello di pagina (per non rompere il workflow degli elementi della pagina). Questo elemento diviene a tutti gli effetti parte del DOM (document object model) che descrive la pagina visuallizzata. In particolare coleziona:
- tutti eventi di movimento mouse
- tutti gli eventi di click
- tutti gli eventi di scrolling
- tutti gli eventi keybard
onkeydown
salva tutto quello che può sull'evento in un JSON che viene spedito alla extension.
Si occupa della iniezione del context script. Quando riceve un pacchetto dal context, richiede i dati di geometria finestre e tab al browser, crea un JSON contenente tutto e lo spedisce alla application, se la application ha inviato il comando {"record": true} alla extension.
Atttenzione che la extension non ha memoria, ovvero non salva da nessuna parte i dati. Se gli arriva un nuovo pacchetto, quello precedente viene buttato via e non salvato.
Fulcro di tutto il giochino, vive in un processo separato rispetto al browser (è come se fosse una nuova esecuzione di chrome a sè stante). Ha la poossibbilità di comunicare con il browser unicamente tramite un canale che si viene a creare tra extension e application (ricordi il file di configurazione con quegli hash strani? serviva a quello, permette alle due di identificarsi a vicenda e inviarsi messaggi, e ci vuole unn file di configurazione per una).
Sul canale di comunicazione viaggiano due messaggi:
- dalla applicazione alla extension: comandi che determinano e la extension deve inviare i pacchetti che arrivano dal browser (prevalentemente
{"record": true/false}) - dalla extension alla application: i dati catturati dalla applicazione se il recording è on o off.
La application poi si occupa di:
- visualizzare una pagina web (la pagina di setting che usavi tu) con i dati in tempo reale. Si tratta di un DOM a tutti gli effetti.
- gestire la memoria (
chrome.storage) dentro la quale ci sono i dati catturati sotto forma di JSON, che poi saranno elaborati (ecco perche ci metteva tanto) in formato CSV, XML o JSON string. - gestire lo screen recording
event : {
time : {
epoch : time of event from epoch
localeTime : time string formatted with locale rules
localeDate : date string formatted with locale rules
}
title : title of page that generates event
mouse : {
x : x position of mouse with respect to screen
y : y position of mouse with respect to screen
xWin : x position of mouse with respect to document
yWin : y position of mouse with respect to document
evnt : type of event (click, move, ...)
target : target that has generated click/dblclick event
button : button pressed
}
keyboard : {
keyCode : hex code of key pressed
key : string char of key pressed
string : complete combination of key pressed
ctrl : track if ctrl modifier is pressed
alt : track if alt modifier is pressed
shift : track if shift modifier is pressed
meta : track if meta modifier is pressed
}
windows : [ <- this is a list of window object
{
id: unique id to identify the window
focused: it is true if the windows is focused
geometry: {
top: distance between top border to top of the screen
left: distance between left border to left of the screen
width: width of the window
heigth: heigth of the window
}
incognito: this is true if the window is in incognito mode
type: type of the window, if normal or popup
alwaysOnTop: set to true if the window is on top
tabs: [
{
index: unique ordered number for the tab (from left to right),
active: if the tab is the active in his own window
pinned: if the tab is pinned
hightlighted: if the tab is highlighted
title: shortened to 25 char title of the tab
url: shortened to 25 char url of the tab
status: status of the tab, if loading the page or if completed
}
]
}
]
}