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.


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

In questa prima parte assolviamo al compito di dare un nome alla nostra estensione (“name”: “WP Stats”,) e ne diamo una descrizione, compresa di autore (“author”: “Zirconet”,) e numero di versione (“version”: “1.1.0”,). Faccio notare che ogni parametro termina con una ‘virgola‘ e che sia il nome del parametro che il suo contenuto e chiuso dalle “virgolette“.

Il parametro relativo alla versione del file (“manifest_version”: 2,) assume il valore ‘2’ dalla versione 18 di Chrome in avanti.

I parametri relativi al nome, alla versione dell’estensione e a quella del manifesto sono RICHIESTI e quindi OBBLIGATORI e vanno espressamente scritti nel file manifest.json. Il parametro relativo alla descrizione dell’estensione compare tra i RACCOMANDATI da Google.


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

In questa porzione di codice viene dichiarato l’utilizzo di una pagina di opzioni secondo il nuovo standard in uso dalla versione 40 di Chrome in avanti. I parametri sono inclusi in parentesi graffe { } e suddivisi tra loro da una virgola. In particolare:

  • con (“page”: “options.html”,) – obbligatorio – viene dichiarato il nome della pagina del nostro progetto che verrà visualizzata nella nuova veste di popup nella pagina di gestione dell’estensione. In pratica è sufficiente clikkare con il pulsante destro del mouse sull’icona dell’estensione presente nella toolbar per accedere al menù contestuale che mostrerà attivo il link alle Opzioni, insieme a quelli di default relativi a Rimuovi da Chrome…, Nascondi Pulsante e Gestisci estensioni;
  • con (“chrome_style”: true,) – opzionale – riguarda la possibilità che venga utilizzati stylesheet sulla nostra pagina opzioni. Google raccomanda il valore -true- a prescindere;
  • con (“open_in_tab”: true) – opzionale – dichiariamo che le opzioni saranno gestite come popup. Il valore ‘false’ produce un tab, ovvero mostra la pagina di opzioni in una nuova pagina, comportamento deprecato da Google.

"background": {
	"scripts": ["js/background.js"],
	"persistent": true
  },

In questa importantissima parte del file manifest.json viene dichiarato l’utilizzo di codice Javascript in background e il file dove risiede, in questo caso perché non ne abbiamo bisogno non viene dichiarata alcuna pagina background.html:

  • con (“scripts”: [“js/background.js”],)  viene dichiarato il nome e la posizione del file che contiene la logica dell’estensione. In questo caso il file ‘background.js’ è salvato nella cartella ‘js’;
  • con (“persistent”: true,) indichiamo che il nostro codice ‘gira’ in continuo senza essere richiamato da un evento.

"browser_action": {
	"default_icon": "img/wp-logo.png"
  },

wp-logoIn questa parte dedicata ai settaggi relativi alla vita dell’estensione nella toolbar indichiamo il percorso della risorsa relativa all’icona che andrà ad essere utilizzata dall’estensione e che ho caricato nella cartella ‘img’ insieme a tutte le altre immagini del progetto: (“default_icon”: “img/wp-logo.png”,) – opzionale.


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

Questa è una parte di codice che richiede più di altre la massima considerazione e attenzione in quanto da ciò che vi è indicato dipendono i permessi concessi all’estensione e quindi ne determiniamo il comportamento.

I permessi (“permissions”: []) si trovano racchiusi nelle parentesi quadre  [ ] e suddivisi tra loro con le virgole. In particolare nel nostro caso vengono attivati i seguenti permessi:

  • (“tabs”,) : è il più comune dei permessi e quasi sempre presente e consente a WP STATS di creare e gestire nuove finestre di Chrome, compresa quella dell’opzioni di nostro interesse;
  • (“storage”) : consente all’estensione di accedere all’API chrome.storage che si occupa di mantenere l’user data. In particolare ci occorre affinché WP STATS  sia in grado di registrare i parametri inseriti dall’utente tramite la pagina di opzioni e quindi di accedervi per richiamarli al bisogno;
  • (https://stats.wordpress.com/*/”,) : poiché tramite l’HTTPRequest andremo a reperire dati su un diverso dominio dal nostro (cosiddetta Cross Domain Request), dobbiamo consentire all’estensione di contattare wordpress.com e reperire in esso il file XML contenente le statistiche che vogliamo poi mostrare;
  • (“notifications”) : con questo permesso acconsentiamo affinché WP STATS possa interagire con l’API chrome.notification per modificare lo stato dell’icona nella toolbar.

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

icon128

Quest’ultima parte di codice si occupa della gestione delle icone relative alla nostra estensione.

(“icons”: {}) è tra i parametri che Google raccomanda vengano compilati nel manifest.json e consiglia di prevedere tre diversi tipi di file: un icona 16×16 (utilizzata come favicon nelle pagine dell’estensione), una 48×48 (utilizzata per rappresentare l’estensione nell’elenco della gestione Estensioni) e un’altra 128×128 (utilizzata per comparire nel Web Store).

Con (“48”: “img/icon48.png”,) e con (“128”: “img/icon128.png”) indichiamo semplicemente il percorso dei due file ‘.png’ salvati nella cartella ‘img’.


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).

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: