Sviluppare plugin per google Chrome

Sviluppare plugin
per
Google Chrome

Marco Vito Moscaritolo – marco@agavee.com – agavee

Marco Vito Moscaritolo (aka mavimo)

Sviluppatore web specializzato in Drupal Contatti:
(per chi non lo conoscesse: ) @mavimo
con particolare interessa verso le nuove marco@agavee.com
tecnologie, sopratutto nel settore mobile. http://mavimo.org
Attualmente lavora come freelance ed http://agavee.com
all'interno del team agavee


Cosa andiamo a vedere?
● Perché sviluppare estensioni per browser ...perché proprio per Google Chrome?

● Che tipologie di estesioni possiamo realizzare quanta scelta... forse troppa?

● La struttura di base di un estensione ...basta veramente poco!

● Le funzionalità implementate (API) ...o meglio, quelle già implementa in da altri in modo da lavorare meno noi!

● Gli strumenti di debug ...non siamo perfetti, potremmo fare pure qualche errore?

● Il deploy dell'applicazione ....da Google o sul nostro sito?

● Varie ed eventuali ...sempre da mettere!


Vantaggi nello sviluppare estensioni per browser?
● 100% dei PC usati come client hanno un browser (o possono averlo)
● Quasi tutti i browser supportano plugin (IE9, FF3/4, Google Chrome, Opera, ...)
● Possibilità di usare linguaggi molto conosciuti (javascript, HTML, XML/XUL …)
● Possibilità di lavorare in ambienti “blindati” (non serve cross-compatibilità)
● Possibilità di superare alcuni limiti di javascript con le API interne (browser-
specifiche)


Diffusione dei browser (mondo) http://gs.statcounter.com/

60

50

40

30

20

10

0
2010-01 2010-02 2010-03 2010-04 2010-05 2010-06 2010-07 2010-08 2010-09 2010-10 2010-11 2010-12 2011-01


Diffusione dei browser (Europa) http://gs.statcounter.com/

50

45

40

35

30

25

20

15

10

5

0
2010-01 2010-02 2010-03 2010-04 2010-05 2010-06 2010-07 2010-08 2010-09 2010-10 2010-11 2010-12 2011-01


Diffusione dei browser (Italia) http://gs.statcounter.com/

60

50

40

30

20

10

0
2010-01 2010-02 2010-03 2010-04 2010-05 2010-06 2010-07 2010-08 2010-09 2010-10 2010-11 2010-12 2011-01


Tipologie di estesioni

locali... ...remote
● Rapide nell'esecuzione ● Maggior controllo
il carico è sulla macchina infrastruttura ben definita, possibile usare software esterni

● Disponibilità off-line ● Codice lato server
Utilizzo in mobilità il codice non viene distribuito nell'applicazione

● Utilizzo all'interno di altri siti ● Facilità di analisi dei problemi
non devo basarmi SOLO sui feedback degli utenti
● Possono compiere operazioni in
background


Le tre tipologie principali

Le modalità di esecuzione:
● Nelle tabs
L'applicazione è una pagina visibile nel browser

● In pop-up
L'applicazione gira nel popup

● Nelle pagine
L'applicazione gira in pagine web di sito (anche non nostro)

● In background Script
L'applicazione gira in maniera silente per l'utente


Ok, ma come sono fatte?

● Javascript
ormai è ovunque ed iniziamo ad usarlo abbastanza (anche
grazie ai framework che sono nati)

● HTML con un buon supporto alle
funzionalità HTML5
275 punti su 400 secondo http://beta.html5test.com/
!
Flash / Java / C / C++ / .NET / ... pe
hy
●

ol o
(embedded) (NPAPI)
s
è
Non

Struttura di base
● File di dichiarazione del plugin (manifest.json)
un banalissimo file JSON

● Cartella di localizzazione (_locales) con sotto
cartelle per ogni lingua
lingue secondo le regole IETF language tags

● File HTML, JS, CSS ed immagini a piacere per
condire il tutto
alcuni file hanno nomi secondo convenzioni

manifest.json
{
"name": "Codemotion",
"version": "1.0",
"description": "let's code an innovation world ®",
"icons": {
"48": "imgs/icon48.png",
Informazioni di base dell'estensione
"64": "imgs/icon64.png"
},
"default_locale": "en_US",
"browser_action": {
Localizzazione
"default_title": "__MSG_app_title__",

},
"default_icon": "imgs/icon48.png",
"popup": "generator.html" Interazione con il browser
"options_page": "options.html",
"permissions": [
Pagina di setup
"tabs",

],
"notifications",
"http://www.codemotion.it/*" Permessi
}
"homepage_url": "http://www.codemotion.it/"
Altre informazioni

Localizzazione
● Il codice si trova in file isolati
ad esempio _locales/IT/messages.json

● Utilizzo di JSON come formato per il file delle traduzioni
● Possibilità di usare placeholder per i testi
'app_title': {
'message' : 'Ciao $nome$',
'placeholders' : {'nome' : { 'content' : '$1' }
}

● Possilibità di usare le API per accedere alle traduzioni
var msg = chrome.i18n.getMessage('welcome', ['Marco']);
document.getElementById('user_msg').innerHTML = msg;


Pagina delle opzioni
● Definibile nel manifest.json
● Accessibile dal menu dell'estensione
● Possibilità di usare le funzionalità di HTML5 per
salvare le informazioni all'interno del browser
(localstorage, Local DB, …)
var username = localStorage['auth_user'];
var token = localStorage['auth_token'];


Gestione dei permessi
● Fornisce accesso alle singole funzionalità (API specifiche), che esulano dai
permessi specifici delle pagine web, ad esempio:
– Gestione delle tabs
– Storage locale illimitato
– Accesso alla cronologia
– Notifiche al sistema
– …

● Permessi per chiamate XHR con autorizzazione sul dominio, anche attraverso
l'utilizzo di pattern:
– http://*.codemotion.it/ws/*
– https://auth.codemotion.it/ws/*


Estensioni locali (popup)
● Dichiarazione inserita all'interno di manifest.json
elemento che deve essere caricato ed eseguito nel popup:
'browser_action': {
'popup': 'generator.html'
}

● Popup gestibili a runtime (aggiunta, rimozione, settaggi, …)
● Possibilità di modificare a runtime il comportamento della visualizzazione
ad esempio la modifica dell'aspetto dell'icona:
chrome.browserAction.setBadgeBackgroundColor({
color: [208, 0, 24, 255]
});
chrome.browserAction.setIcon({
path: 'operation_end.png'
});


Estensioni locali (tabs)
elemento che deve essere caricato ed eseguito nel popup:
'app': {
'launch': {
1 }
'local_path': 'main.html'

'urls': [
'*://*.codemotion.it/app/*'
],
2 'launch': {
'web_url': 'http://www.codemotion.it/app/start.html'
},
}

● L'applicazione può essere locale (1) o remota (2)


Estensioni locali (background)
'background_page': 'background.html',

● Architettura basata su messaggi o connessioni persistenti tra pagina di
background e altri elementi (popup, tabs, servizi remoti, altre pagine …)


Estensioni locali (content script)
'content_scripts': [
{
"matches": ["http://www.codemotion.it/*"],
"css": ["css/mystyles.css"],
"js": ["js/myscript.js"]
}
],

● Permette di inserire codice (anche programmaticamente) all'interno di pagine
web a cui non si ha direttamente accesso, per integrarne funzionalità o
modificarne il comportamento


Estensioni locali (native)
● Dichiarazione inserita all'interno del manifest.json:
'plugins': [
{ "path": "plugins/codemotion.dll" },
{ "path": "plugins/codemotion.so" },
{ "path": "plugins/codemotion_64.so" }
],

● Permette di inserire codice scritto in C / C++ secondo le specifiche NPAPI che
può essere richiamato in javascript:
<embed type="application/x-codemotion" id="codemotion">
<script>
var CMP = document.getElementById("codemotion");
var res = CMP.getTalks();
document.getElementById('talk_list').innerHTML = res;
</script>


L'approccio... ...è javascript!
● Gestione asincrona delle chiamate
● Gestione ad eventi
come per il DOM delle pagine nell'approccio classico javascript
chrome.tabs.onCreated.addListener(
function(Tab tab) {
console.log(“Aperta tab: ” + tab.url);
}
);
chrome.history.onVisited.addListener(
function(HistoryItem result) {
alert(result.visitCount);
}
);


Che API fornisce?

● chrome.bookmarks.* ● chrome.idle.*
● chrome.browserAction.* ● chrome.management.*
● chrome.contextMenus.* ● chrome.omnibox.*
● chrome.cookies.* ● chrome.pageAction.*
● chrome.extension.* ● chrome.tabs.*
● chrome.history.* ● chrome.windows.*
● chrome.i18n.*

...possono bastare, ma...


...stanno arrivando anche...
● chrome.experimental.clipboard.*
● chrome.experimental.infobars.*
● chrome.experimental.processes.*
● chrome.experimental.proxy.*
● chrome.experimental.sidebar.*
● chrome.experimental.webNavigation.*
● chrome.experimental.webRequest.*

...che sono “sperimentali”, ma utilizzabili!
(NB: richiedono il permesso “experimental”)


Gli strumenti di debug
● Sono gli stessi forniti per l'analisi
delle pagine web “standard”
alla fine si tratta proprio di CSS e Javascript

● Content inspector per il codice
HTML/CSS
con possibilità i modificarlo al volo (a la firebug)

● Possibilità di inserire brackpoint
all'interno di codice javascript
ed anche brackpoint condizionali, watcher di
espressioni, analisi delle variabili nello scope


Il deploy dell'applicazione
● Build automatico da parte del sistema di ● Distribuzione ad uso interno senza

Google
pubblicazione rendere l'estensione pubblica (web
application ad uso aziendale, intranet)
● Possibilità di avere utenti beta-tester
● Pacchettizzazione da effettuare
● Sistema di distribuzione (e visibilità) più
manualmente (lanciare un comando
ampio
passando i dati di firma e
● Possibilità di usare il sistema di vendita pacchettizzazione corretti)
di Google ● Generazione del sistema di notifica degli
● Sistemi automatici di aggiornamento e aggiornamenti in maniera manuale (un
versioning delle applicazioni file XML)


Varie ed eventuali

È tutto oro quello che luccica?
...l'esperienza ci insegna, da qualche parte deve esserci la fregatura (o forse no?) :)


Domande?
'attenz ione!
Grazi e per l

Reference
Documentazione ufficiale:
● http://code.google.com/chrome/extensions/
Developer dashboard:
● https://chrome.google.com/webstore/developer/dashboard
Presentazioni disponibili:
● http://www.slideshare.net/mihaiionescu/google-chrome-extensions-devfest09
● http://www.slideshare.net/taobaoued/chrome-extension-develop-starts
Legalese:
● https://chrome.google.com/extensions/intl/en/program_policies.html
● https://chrome.google.com/extensions/intl/en/dev_tos_text.html


Sviluppare plugin per google Chrome

More Related Content

Similar to Sviluppare plugin per google Chrome (20)

More from Codemotion (20)

Sviluppare plugin per google Chrome