WP STATS, come ho creato la mia prima Chrome Extension (parte 3 – Il file background.js)

Come ho avuto modo di parlare nei precedenti post a riguardo, ho creato un’estensione di Chrome che mi era necessaria e che non riuscivo a trovare sul Chrome Web Store.


Istantanea_2016-02-01_19-43-50WP STATS una volta installato nel nostro browser Chrome e settati i parametri necessari per il suo funzionamento, è in grado di provvedere in maniera automatica a contattare il servizio di WordPress.com di rilascio delle statistiche di accesso al blog di cui si possiedono le opportune credenziali di accesso e a visualizzarne il numero di hits giornaliere all’interno della sua icona.

Istantanea_2016-02-01_19-38-58In pratica per ‘startare’ occorre solo compilare i seguenti parametri nella sezione Opzioni di WP STATS:

  • Url del blog da monitorare;
  • l’API KEY di Akismet assegnata al sito.

In questo post ci concentreremo sul file background.js, basilare per il funzionamento di una qualsiasi estensione.

In pratica si tratta del motore principale della nostra estensione: in esso sono contenute le istruzioni principali (lo script in Javascript). Comunemente l’architettura delle estensioni prevede un file background.html che si attiva con l’estensione insieme al codice contenuto nel file background.js, questo quando non si prevede di aver bisogno di “scatenare” il codice ad un particolare evento (come potrebbe essere l’apertura di una particolare pagina), come accade per la nostra estensione, visto che WP STATS mostra un contatore e compie in loop questa operazione fino a quando Chrome è aperto,

In questo articolo spiegherò in dettaglio il funzionamento del background.js che ho creato per l’estensione WP STATS (clicca sul seguente link per visualizzare il sorgente):

//inizializzazione variabili
var url;
var text = 'Wait!';
var start = false;
var time = 60000;
var www1 = 'https://stats.wordpress.com/csv.php?api_key=';
var www3 = '&blog_uri='
var www5 = '&table=views&days=1&format=xml';


//evento all'installazione dell'applicazione (richiamo option.html)
chrome.runtime.onInstalled.addListener(function() {
  chrome.tabs.create({url: "option.html"});
});

//inizializzazione etichetta estensione
chrome.browserAction.setBadgeText({text});
chrome.browserAction.setBadgeBackgroundColor({ color: "#FF0000"});

//richiamo funzione all'avvio dell'estensione
on_start();


//Loop controllo e aggiornamento contatore
var readyStateCheckInterval = setInterval(function() {
	restore_options();
	sendRequest(url, function (response) {	
	text = response;
	if (text != null)
		{
		start = true;
    		chrome.browserAction.setBadgeText({text});
        	chrome.browserAction.setBadgeBackgroundColor({ color: "#FF0000"});
		};
	}
)}, time); 


//XMLHttpRequest
function sendRequest(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
		var xmlDoc = xhr.responseXML;
		var x = xmlDoc.getElementsByTagName("total")[0].childNodes[0].nodeValue;
            	callback(x);
        }
    };
    xhr.open("GET", url, true);
    xhr.send();
}


//aggiornamento contatore
function restore_options() {
    chrome.storage.sync.get({
    favoriteWww: '',
    favoriteKey: ''
  }, function(items) {
    	www4 = items.favoriteWww;
    	www2 = items.favoriteKey;
	url = www1 + www2 + www3 + www4 + www5;
	if (start == true) {	
			chrome.browserAction.setBadgeBackgroundColor({ color: "#00FF00"});
			   };
  });

	sendRequest(url, function (response) {  	
	text = response;
	if (text != null)
		{
		start = true;
    		chrome.browserAction.setBadgeText({text});
        	chrome.browserAction.setBadgeBackgroundColor({ color: "#FF0000"});
		};
});	
}


//funzione all'avvio dell'estensione
function on_start() {
    
    text = 'wait';
    chrome.browserAction.setBadgeText({text});
    
    chrome.storage.sync.get({
    favoriteWww: '',
    favoriteKey: ''
    }, function(items) {
    	www4 = items.favoriteWww;
    	www2 = items.favoriteKey;
	url = www1 + www2 + www3 + www4 + www5;
	chrome.browserAction.setBadgeBackgroundColor({ color: "#00FF00"});
	
        sendRequest(url, function (response) {  	
	text = response;
    	chrome.browserAction.setBadgeText({text});
	chrome.browserAction.setBadgeBackgroundColor({ color: "#FF0000"});
    });
}
)};

All’interno delle parentesi graffe { } che aprono e chiudono il file, scopriamo in dettaglio le varie sezioni che lo compongono e il loro significato.


var url;
var text = 'Wait!';
var start = false;
var time = 60000;
var www1 = 'https://stats.wordpress.com/csv.php?api_key=';
var www3 = '&blog_uri='
var www5 = '&table=views&days=1&format=xml';

In questa prima parte assolviamo al compito di inizializzare le variabili che andremo ad utilizzare nelle successive funzioni presenti nel nostro script. Ad alcune assegneremo i valori che ci necessitano:

  • la variabile url (var url;) la dichiariamo in quanto sarà utilizzata da diverse funzioni;
  • nella variabile text (var text = ‘Wait!’;) è quella in cui è contenuto il valore rappresentato nell’etichetta dell’icona dell’estensione presente nella toolbar: ho assegnato il valore ‘Wait‘ per far comprendere all’utente che l’estensione ha un problema e/o è in attesa di ricevere i dati necessari per il suo funzionamento;
  • la variabile start (var start = false;) è utilizzata come ‘interruttore’: parte da ‘false‘ ovvero da spento e si attiva (ovvero assume il valore ‘true‘) nel momento in cui avviene il collegamento con l’API XMLHttpRequest. Quando è acceso il ‘badge’, ovvero l’etichetta della nostra icona viene aggiornata;
  • con la variabile time (var time = 60000;) contiene il valore espresso in ms da cui dipende il delay dell’istruzione ‘setInterval‘: in questo caso l’aggiornamento del contatore è settato per avvenire ogni 60 secondi;
  • le ultime variabili www1, ww3 e ww5 sono le parti dell’url del servizio di WordPress.com richiamatoXMLHttpRequest da che sono fisse.

chrome.runtime.onInstalled.addListener(function() {
  chrome.tabs.create({url: "option.html"});
});

Questa parte di codice si ‘attiva’ solo se Chrome rileva che l’estensione è appena stata installata (chrome.runtime.onInstalled.addListener). Per funzionare correttamente WP STATS ha ovviamente bisogno di conoscere l’indirizzo del sito WordPress.com da monitorare e la relativa chiave AKISMET, grazie a questa istruzione alla prima installazione viene automaticamente aperta la pagina option.html (chrome.tabs.create({url: “option.html”})) in cui l’utente sarà invitato di inserire i suddetti parametri.


chrome.browserAction.setBadgeText({text});
chrome.browserAction.setBadgeBackgroundColor({ color: "#FF0000"});

Tramite queste due istruzioni (chrome.browserAction.) diciamo a Chrome che l’icona della nostra estensione presente nella toolbar ha un ‘badge’, ovvero un etichetta di cui controlliamo il contenuto (.setBadgeText({text});) e il colore dello sfondo (setBadgeBackgroundColor({ color: “#FF0000”});), in questo caso ‘rosso’;


on_start();

All’avvio dell’estensione, grazie al richiamo della funzione on_start(), l’estensione provvederà ad aggiornarsi senza attendere i 60 secondi settati dall’intervallo di loop.


var readyStateCheckInterval = setInterval(function() {
	restore_options();
	sendRequest(url, function (response) {	
	text = response;
	if (text != null)
		{
		start = true;
    		chrome.browserAction.setBadgeText({text});
        	chrome.browserAction.setBadgeBackgroundColor({ color: "#FF0000"});
		};
	}
)}, time);

Qui sta il loop della nostra estensione che viene gestito tramite l’intervallo (setInterval(function() {) e dal suo relativo parametro di tempo (}, time);) il cui valore è ricavato dalla variabile settata all’inizio.

Innanzitutto richiamiamo la funzione che provvede al richiamo dei parametri che ci occorrono (restore_options();), poi lanciamo quella che si occupa di stabilire il GET di XMLHttpRequest (sendRequest(url, function (response)) , ne prendiamo il valore restituito e in caso non sia nulla (if (text != null)), modifichiamo di conseguenza il valore visualizzato nel badge della nostra icona (chrome.browserAction.setBadgeText({text});) e il relativo colore (chrome.browserAction.setBadgeBackgroundColor({ color: “#FF0000”}); };)


function sendRequest(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
		var xmlDoc = xhr.responseXML;
		var x = xmlDoc.getElementsByTagName("total")[0].childNodes[0].nodeValue;
            	callback(x);
        }
    };
    xhr.open("GET", url, true);
    xhr.send();
}

Siamo al ‘cuore’ del codice di WP STAT che sfrutta il GET dell’API XMLHttpRequest.

Creiamo l’oggetto che ci serve (var xhr = new XMLHttpRequest();) e quindi una volta stabilita la connessione ‘salviamo’ la risposta in xml prendendo ciò che ci occorre, ovvero il valore contenuto nel tag “total”, quindi lo salviamo nella variabile ‘x’  che prontamente restituiamo al programma.


function restore_options() {
    chrome.storage.sync.get({
    favoriteWww: '',
    favoriteKey: ''
  }, function(items) {
    	www4 = items.favoriteWww;
    	www2 = items.favoriteKey;
	url = www1 + www2 + www3 + www4 + www5;
	if (start == true) {	
			chrome.browserAction.setBadgeBackgroundColor({ color: "#00FF00"});
			   };
  });

	sendRequest(url, function (response) {  	
	text = response;
	if (text != null)
		{
		start = true;
    		chrome.browserAction.setBadgeText({text});
        	chrome.browserAction.setBadgeBackgroundColor({ color: "#FF0000"});
		};
});	
}

In questa parte di codice assembliamo il contenuto della variabile ‘url‘ richiamando ciò che l’utente ha memorizzato nelle opzioni e quindi lanciamo la funzione vista precedentemente che si occupa di andare a ‘recuperare‘ il valore delle visite conteggiate da WordPress.com per il sito. Nell’ultima parte aggiorniamo il badge sull’icona con il nuovo valore.


</pre>
<pre>function on_start() {
    
    text = 'wait';
    chrome.browserAction.setBadgeText({text});
    
    chrome.storage.sync.get({
    favoriteWww: '',
    favoriteKey: ''
    }, function(items) {
    	www4 = items.favoriteWww;
    	www2 = items.favoriteKey;
	url = www1 + www2 + www3 + www4 + www5;
	chrome.browserAction.setBadgeBackgroundColor({ color: "#00FF00"});
	
        sendRequest(url, function (response) {  	
	text = response;
    	chrome.browserAction.setBadgeText({text});
	chrome.browserAction.setBadgeBackgroundColor({ color: "#FF0000"});
    });
}
)};
</pre>
<pre>

Questa parte di codice praticamente uguale alla precedente viene richiamata solo all’avvio dell’estensione e si è resa necessaria affinché il contatore venga prontamente aggiornato all’avvio senza attendere il loop.


Nei successivi post vedremo insieme in dettaglio tutti i passaggi fatti per compilare l’estensione WP STATS:

Risorse:

  • WP STATS sul Chrome Web Store ufficiale : (link);
  • Repositori sorgenti WP STATS su GITHUB: (link).

3 Risposte

  1. […] WP STATS, come ho creato la mia prima Chrome Extension (parte 3 – Il file background.js) martedì, 23 febbraio 2016 […]

    Mi piace

  2. […] WP STATS, come ho creato la mia prima Chrome Extension (parte 3 – Il file background.js) martedì, 23 febbraio 2016 […]

    Mi piace

  3. […] WP STATS, come ho creato la mia prima Chrome Extension (parte 3 – Il file background.js) martedì, 23 febbraio 2016 […]

    Mi piace

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: