Sviluppare estensioni per google chrome

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:[email protected]

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)


Andamento (Italia)


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


"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


"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


"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


"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


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


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

Sviluppare estensioni per google chrome

Technology

Transcript of Sviluppare estensioni per google chrome