WP STATS è ora disponibile sul Chrome Web Store

Istantanea_2016-03-02_19-50-42

E’ con un certo orgoglio che annunciamo che da oggi disponibile sul Chrome Web Store la nostra estensione WP STATS (contatore delle visite su siti wordpress.com), quella che abbiamo realizzato per tenere sotto controllo le statistiche di questo blog.

Nei precedenti post abbiamo spiegato cosa ci ha spinti a realizzare un’estensione di Chrome, di quali meccanismi occorre  tenere conto e di quali linguaggi occorre padroneggiare. Vi abbiamo mostrato in dettaglio come nasce un’estensione, il funzionamento del file manifest.json, il codice contenuto nel file backgroung.js, ecc…:


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 (ogni 60 secondi) 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.

Necessaria al funzionamento dell’estensione e suo principio cardine è la ‘vecchia’ WordPress.com Stats API che viene invocata all’indirizzo https://stats.wordpress.com/csv.php? completandolo dell’identificativo del blog e relativa chiave Akismet e fornisce una pletora di dati anche in formato XML:

Istantanea_2016-02-01_20-17-15

Se non sapete la vostra chiave gratuita di Akismet che vi è stata assegnata al momento della creazione del vostro account in WordPress.com è possibile reperirla facilmente a questo indirizzo http://apikey.wordpress.com avendo l’accortezza di esservi prima ‘loggati‘ al vostro blog come amministratori.Senzanome


Risorse:

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

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. Continua a leggere

WP STATS, come ho creato la mia prima Chrome Extension (parte 2 – Il file manifest.json)

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 manifest.json, basilare per il funzionamento di una qualsiasi estensione.

Non si tratta che di un file in formato JSON che contiene l’elenco delle proprietà dell’estensione quali il nome, la descrizione, la versione ecc…, ma anche per dichiarare a Chrome ciò che l’estensione fa, di quali permessi occorrono per il funzionamento e l’elenco degli asset. Per un approfondimento è possibile fare affidamento sulla documentazione ufficiale fornita direttamente da Google, in questo articolo spiegherò in dettaglio il funzionamento del manifest.json che ho creato per l’estensione WP STATS (clicca sul seguente link per visualizzare il sorgente):

{ 
  "name": "WP Stats",
  "author": "Zirconet",
  "description": "Show WordPress hits",
  "version": "1.1.0",
  "manifest_version": 2,

  "options_ui": {
	"page": "options.html",
	"chrome_style": true,
	"open_in_tab": false
  },

  "background": {
	"scripts": ["js/background.js"],
	"persistent": true
  },
  
  "browser_action": {
	"default_icon": "img/wp-logo.png"
  },

  "permissions": [
	"tabs",
        "storage",
	"https://stats.wordpress.com/*/",
        "notifications"
  ],

   "icons": {
	"48": "img/icon48.png",
	"128": "img/icon128.png"
  }

}

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

WP STATS, come ho creato la mia prima Chrome Extension (parte 1 – Presentazione)

Le Extension (estensioni) sono uno strumento imprescindibile per un browser moderno. In Google Chrome sono dei piccoli programmi scritti in Javascript, HTML e CSS che girano espandendone le funzionalità. Annunciate nel 2009 e ufficialmente introdotte a partire dal febbraio del 2010 sono scaricabili gratuitamente dal Chrome Web Store.Istantanea_2016-02-01_17-28-02

Personalmente ne ho fatto sempre uso, trovandole di una comodità assoluta.
Oggi come oggi dobbiamo tenere sotto controllo molte cose che ci riguardano sul web e le estensioni di Chrome risolvono efficacemente molti problemi: notifiche varie, blocco banner pubblicità indesiderate, navigazione anonima, ottimizzazione di Youtube ecc… Quindi confesso di averne installate a decine sul mio browser cercando di trovare un giusto compromesso tra l’effettiva efficacia e la dispersione inutile di risorse.

Senzanome

Ecco un elenco dell’estensioni che utilizzo in questo momento, nell’ordine:

  • WP STATS (link) : (per controllare in real time le visite giornaliere su questo blog);
  • WHOS.AMOUNG.US USER ONLINE COUNTER (link) : (per vedere in tempo reale quanti sono collegati a questo blog);
  • CHECKER PLUS FOR GMAIL (link) : (per avere le notifiche delle email);
  • TWITCH NOW (link) : (che mi da notifica di quando i miei streamer preferiti sono online su Twitch);
  • HITBOX PLUS (link) : (che mi da notifica di quando i miei streamer preferiti sono online su Hitbox);
  • CHECKER PLUS FOR GOOGLE CALENDAR (link) : (per avere le notifiche del mio calendario su Google);
  • VISUALPING (link) : (che mi notifica quando alcuni parti di siti che mi interessano vengono modificate);
  • UBLOCK ORIGIN (link) : (che mi evita molta della pubblicità che gira in rete);
  • STYLISH (link) : (con il quale ho modificato la visualizzazione della mia homepage di Twitter per renderla più comoda alle mie esigenze);
  • RISPARMIO DATI (link) : (che utilizza una tecnologia di Google per l’ottimizzazione del traffico dati durante la navigazione);
  • FONTFACE NINJA (link) : (che mi consente di analizzare i tipi di font utilizzati nei siti che visito);
  • YOUR QUALITY FOR YOUTUBE (link) : (che si occupa di farmi vedere i video sul Tubo in qualità HD se disponibile);
  • SELECT & TRANSLATE (link) : (che mi fornisce un menù contestuale con la quale selezionare e tradurre frasi durante la navigazione);

… e ancora diverse altre…

Per controllare e gestire quelle che avete installato sul vostro browser è sufficiente andare nel menù di Chrome SNP_9721C573E41777FBA43E1498AD084E3B160C_2696434_en_v2in Altri strumenti e quindi selezionare Estensioni.

Tutto questo per dirvi che sono sempre stato affascinato dalla funzionalità delle Estensioni e che oramai di molte di queste non potrei più farne a meno. Come purtroppo è successo con quella che si  occupava fino a qualche settimana fa di fornirmi in tempo reale le statistiche dei visitatori sul CITTADINO IMPERFETTO. Non so come mai, ma ha smesso di funzionare ed addirittura è stata cancellata dallo suo sviluppatore dal WEB STORE (boh, mistero). Sfortunatamente non sono riuscito a trovarne un’altra che fornisse le medesime funzionalità, quindi senza farmi prendere dallo sconforto ho pensato di ‘scrivermela da solo‘.icon128

Il punto di partenza è stato il sito che Google mette a disposizione dei programmatori interessati a sviluppare Estensioni di Chrome: developer.chrome.com. In lingua inglese qui trovate tutte le istruzioni occorrenti a programmare un estensione.

Dopo una prima infarinatura su concetti chiave come il funzionamento del file manifest.json, del file background.js e delle chiamate alle API come XMLHttpRequest, mi sono messo di buzzo buono e in una nottata di lavoro sono riuscito a sfornare la prima versione di WP STATS.


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.

Necessaria al funzionamento dell’estensione e suo principio cardine è la ‘vecchia’ WordPress.com Stats API che viene invocata all’indirizzo https://stats.wordpress.com/csv.php? completandolo dell’identificativo del blog e relativa chiave Akismet e fornisce una pletora di dati anche in formato XML:

Istantanea_2016-02-01_20-17-15

Se non sapete la vostra chiave gratuita di Akismet che vi è stata assegnata al momento della creazione del vostro account in WordPress.com è possibile reperirla facilmente a questo indirizzo http://apikey.wordpress.com avendo l’accortezza di esservi prima ‘loggati‘ al vostro blog come amministratori.Senzanome


Per chi volesse provarla, WP STATS è disponibile gratuitamente sul Chrome Web Store ufficiale a questo indirizzo: https://goo.gl/Q6O6lFIstantanea_2016-03-02_19-50-42


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).
%d blogger hanno fatto clic su Mi Piace per questo: