sviluppare estensioni per google chrome
Post on 16-Apr-2017
4.791 Views
Preview:
TRANSCRIPT
Sviluppare plugin(chiamiamole extension)perGoogle ChromeMarco Vito Moscaritolo
UGI ALT.NET
Marco Vito Moscaritolo
(aka mavimo)
Sviluppatore web specializzato in Drupal (per chi non lo conoscesse: ) con particolare interessa verso le nuove tecnologie, sopratutto nel settore mobile.Attualmente lavora come freelance ed all'interno del team agavee (.com)
Blog: http://mavimo.orgMail:marco@agavee.com
Cosa vedremo?
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
Le funzionalit implementate (API)
o meglio, quelle gi implementa in da altri in modo da lavorare meno
noi!
Interfaccia con strumenti di pagamento
in qualche modo bisogna pur campare...
Gli strumenti di debug
non siamo perfetti, potremmo fare pure qualche errore?
Il deploy dell'applicazione
Il mantenimento di un applicazione
azz, ma dobbiamo proprio farlo noi?
Vantaggi nello sviluppare estensioni per browser?
100% dei PC (normalmente) hanno un browser
Quasi tutti i browser supportano plugin (IE9, FF3/4, Google Chrome, Opera, )
Possibilit di usare linguaggi molto conosciuti (javascript, HTML, XML/XUL )
Possibilit di superare alcuni limiti di javascript con le API interne (browser-specifiche)
Andamento (mondo)
http://gs.statcounter.com/
Andamento (Europa)
http://gs.statcounter.com/
Andamento (Italia)
http://gs.statcounter.com/
Le tre tipologie principali
Modalit di esecuzioneNelle tabs
In pop-up
Nelle pagine
In background
Script
Tipologie di estesioni
locali...Rapidi nell'esecuzione
Disponibilit off-line
Utilizzo all'interno di altri siti
Possono compiere operazioni in background
...remoteMaggior controllo
Funzionalit gestibili lato server
Facilit di analisi dei problemi riscontrati non devo basarmi SOLO sui feedback degli utenti
Ok, ma come sono fatte?
Javascript
ormai ovunque
HTML con un buon supporto alle funzionalit HTML5
275 punti su 400 secondo http://beta.html5test.com/
Flash / C
(embedded) (NPAPI)
Non solo hype!
Silverlight
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": "Demo Alt.Net",
"version": "0.1",
"description": "alt.net conference extension",
"icons": {
"48": "imgs/icon48.png",
"64": "imgs/icon64.png",
},
"default_locale": "en_US",
"browser_action": {
"default_title": "__MSG_app_title__",
"default_icon": "imgs/icon48.png",
"popup": "generator.html"
},
"options_page": "options.html",
"permissions": [
"tabs",
"notifications",
"http://ugialt.net/*",
],
"homepage_url": "http://ugialt.net/"
}
Informazioni di base dell'estensione
Localizzazione
Interazione con il browser
Pagina di setup
Permessi
Altre informazioni
Localizzazione
Codice del file: _locales/en_US/messages.json
{ "app_title": { "message": "Alt.Net conference" } "date_label" : {
"message" : "Milano - 19 Febbraio 2011" }, ... }
Utilizzo in manifest.json:
"default_title" : "__MSG_app_title__"
Nell'applicazione: chrome.i18n.getMessage("app_title");
Pagina di configurazione
Definita in maniefst.json
Accessibile automaticamente nel menu del plugin
Possibilit di salvare impostazioni in locale tramite localStorage:
var username = localStorage['username'];
I permessi
"permissions": [
"tabs",
"geolocation"
"unlimitedStorage"
"history",
"http://ugialt.net/",
"http://*.ugialt.net/",
"http://*.*/wp-admin/*",
],
Accesso alle singole funzionalit:gestione tabs
geolocation
storage locale
cronologia
notifiche
Accesso a chiamate XHR con autorizzazione per dominio
Estensione in popup
Informazione nel manifest.json:
"browser_action": { "popup": "generator.html" },Popup gestibili a runtime (aggiunta, rimozione, settaggi, ...)
Possibilit di modificare a runtime il comportamento delle icone (notifiche agli utenti) attraverso:
chrome.browserAction.setBadgeBackgroundColor({ Color:[208, 0, 24, 255] }); chrome.browserAction.setIcon({ path: "gmail_logged_in.png" });
Estensione in tabs
Informazione nel manifest.json:
"app": { // Applicazione locale "launch": { "local_path": "main.html" }
// Applcazione remota "urls": [ "*://ugialt.net/app/" ], "launch": { "web_url": "http://ugialt.net/app/" } },
NB: Ricordarsi dei permessi di accesso al dominio dell'applicazione per applicazioni remote
Estensione in background
Informazione nel 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 )
Estensioni content script
Informazione nel manifest.json:
"content_scripts": [ { "matches": ["http://ugialt.net/*"], "css": ["css/mystyles.css"], "js": ["js/myscript.js"] } ],
Permette di inserire codice all'interno di pagine web a cui non si ha direttamente accesso, per integrarne funzionalit o modificarne il comportamento
Estensioni native
Informazione nel manifest.json:
"plugins": [ { "path": "plugins/ugialt.dll" } { "path": "plugins/ugialt.so" } { "path": "plugins/ugialt_64.so" } ],
Permette di inserire codice scritto in C / C++ secondo le specifiche NPAPI che pu essere richiamato in javascript
var UAN= document.getElementById("ugialtnet"); var result = UAN.getTalks();
...tanti tipi di estensioni, ma con lo stesso approccio
Gestione asincrona delle chiamate
Gestione ad eventi come per il DOM
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.browserAction.*
chrome.contextMenus.*
chrome.cookies.*
chrome.extension.*
chrome.history.*
chrome.i18n.*
chrome.idle.*
chrome.management.*
chrome.omnibox.*
chrome.pageAction.*
chrome.tabs.*
chrome.windows.*
...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)
Vendere le estensioni/applicazioni?
Interfacciamento con OAuth per servizi a pagamento gestiti in autonomia:
var oauth = ChromeExOAuth.initBackgroundPage({ 'request_url' : 'https://ugialt.net/accounts/OAuthGetRequestToken', 'authorize_url' : 'https://ugialt.net/accounts/OAuthAuthorizeToken', 'access_url' : 'https://ugialt.net/accounts/OAuthGetAccessToken', 'consumer_key' : localStorage['consumer_key'], 'consumer_secret' :localStorage['consumer_secret'], 'scope' : 'https://ugialt.net/data/', 'app_name' : 'Alt.NET Extension' });
Piattaforma di pagamento di Google
Attraverso il sistema di pagamento di Google
pagamento per nazione!
novit di due giorni fa
Strumenti di Debug
Gli stessi per il debug delle pagine web
alla fine si tratta proprio di pagine web e javascript
Extension ID
Code
Pubblicazione dell'estensione
Creare il proprio account sviluppatore
Creare ZIP dell'estensione
Caricarla all'interno del Google App Store
Testare la procedura di pubblicazione con account testar
Setup per la pubblicazione
Dati di baseCategorie
Immagini
Descrizioni
Link
Link al sito, alle FAQ, ..
Account di tracciamento (GA)
Versioning dell'applicazione con possibilit di revert
Il mantenimento
Versioning automatico dell'estensione basato sul numero di versione inserito nel manifest
Possibilit di rilasciare un aggiornamento agli utenti inseriti come tester
Notifica degli aggiornamenti delle estensioni automatica (anche da server esterni al marketplace di google)
Possibilit di effettuare il REVERT di una versione della nostra estensione
tutto oro quello che luccica?
Domande?
Grazie per l'attenzione!
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
/
IEFirefoxChromeSafariOperaOther
2010-0144.9139.865.784.333.681.45
2010-0245.538.996.524.293.671.02
2010-0345.3238.287.364.323.760.96
2010-0444.138.728.274.153.80.96
2010-0543.3238.618.894.413.880.9
2010-0643.1838.099.64.43.90.83
2010-0742.6137.9810.134.553.890.85
2010-0842.0137.9410.814.334.110.8
2010-0940.2638.9711.324.484.320.65
2010-1039.5238.6612.294.384.550.61
2010-1138.9138.513.094.274.640.59
2010-1237.5238.1114.584.574.620.6
2011-0136.9137.9215.474.234.910.56
IEFirefoxChromeSafariOperaOther
2010-0155.2531.646.043.7621.31
2010-0254.531.826.724.081.970.91
2010-0354.4431.277.294.161.970.87
2010-0453.2631.748.064.231.820.89
2010-0552.7731.648.614.141.960.88
2010-0652.8631.159.244.071.910.77
2010-0752.6830.699.884.091.910.74
2010-0851.3431.0910.764.231.880.7
2010-0949.8731.511.544.422.030.63
2010-1049.2131.2412.394.5620.6
2010-1148.1631.1713.354.72.010.6
2010-1246.9430.7614.854.792.070.58
2011-014630.6815.685.0920.55
IEFirefoxChromeSafariOperaOther
2010-0156.729.897.324.061.320.71
2010-0255.4430.498.024.331.270.43
2010-0354.4130.558.914.411.320.4
2010-0455.3629.379.554.131.20.39
2010-055429.6610.424.241.290.4
2010-0653.3529.3711.434.261.230.36
2010-0752.9129.0612.134.231.30.35
2010-0852.282912.894.231.260.33
2010-0950.0729.5814.024.721.310.3
2010-1049.6728.8915.034.851.270.29
2010-1148.6128.5216.424.911.250.29
2010-1247.632817.914.871.270.32
2011-014628.3619.045.091.190.32
top related