Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Sviluppare plugin per google Chrome
1. Sviluppare plugin
per
Google Chrome
Marco Vito Moscaritolo – marco@agavee.com – agavee
2. 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
Marco Vito Moscaritolo – marco@agavee.com – agavee
3. 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!
Marco Vito Moscaritolo – marco@agavee.com – agavee
4. 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)
Marco Vito Moscaritolo – marco@agavee.com – agavee
8. 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
Marco Vito Moscaritolo – marco@agavee.com – agavee
9. 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
Marco Vito Moscaritolo – marco@agavee.com – agavee
10. 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
Marco Vito Moscaritolo – marco@agavee.com – agavee
11. 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
Marco Vito Moscaritolo – marco@agavee.com – agavee
12. 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
Marco Vito Moscaritolo – marco@agavee.com – agavee
13. 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;
Marco Vito Moscaritolo – marco@agavee.com – agavee
14. 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'];
Marco Vito Moscaritolo – marco@agavee.com – agavee
15. 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/*
Marco Vito Moscaritolo – marco@agavee.com – agavee
16. 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'
});
Marco Vito Moscaritolo – marco@agavee.com – agavee
17. Estensioni locali (tabs)
● Dichiarazione inserita all'interno di manifest.json
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)
Marco Vito Moscaritolo – marco@agavee.com – agavee
18. Estensioni locali (background)
● Dichiarazione inserita all'interno di manifest.json
'background_page': 'background.html',
● Architettura basata su messaggi o connessioni persistenti tra pagina di
background e altri elementi (popup, tabs, servizi remoti, altre pagine …)
Marco Vito Moscaritolo – marco@agavee.com – agavee
19. Estensioni locali (content script)
● Dichiarazione inserita all'interno di manifest.json
'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
Marco Vito Moscaritolo – marco@agavee.com – agavee
20. 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>
Marco Vito Moscaritolo – marco@agavee.com – agavee
21. 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);
}
);
Marco Vito Moscaritolo – marco@agavee.com – agavee
23. ...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”)
Marco Vito Moscaritolo – marco@agavee.com – agavee
24. 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
Marco Vito Moscaritolo – marco@agavee.com – agavee
25. 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)
Marco Vito Moscaritolo – marco@agavee.com – agavee
26. Varie ed eventuali
È tutto oro quello che luccica?
...l'esperienza ci insegna, da qualche parte deve esserci la fregatura (o forse no?) :)
Marco Vito Moscaritolo – marco@agavee.com – agavee
27. Domande?
'attenz ione!
Grazi e per l
Marco Vito Moscaritolo – marco@agavee.com – agavee