Sviluppare plugin (chiamiamole extension) per Google Chrome Marco Vito Moscaritolo UGI ALT.NET
Marco Vito Moscaritolo (aka mavimo) Sviluppatore web specializzato in Drupal (per chi non lo conoscesse:  ) con particolar...
Cosa vedremo? <ul><li>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? </li></ul>
Vantaggi nello sviluppare estensioni per browser? <ul><li>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) </li></ul>
Andamento (mondo) http://gs.statcounter.com/
Andamento (Europa) http://gs.statcounter.com/
Andamento (Italia) http://gs.statcounter.com/
Le tre tipologie principali <ul>Modalità di esecuzione <li>Nelle tabs
In pop-up
Nelle pagine
In background </li></ul>Script
Tipologie di estesioni <ul>locali... <li>Rapidi nell'esecuzione
Disponibilità off-line
Utilizzo all'interno di altri siti
Possono compiere operazioni in background </li></ul><ul>...remote <li>Maggior controllo
Funzionalità gestibili lato server
Facilità di analisi dei problemi riscontrati  non devo basarmi SOLO sui feedback degli utenti </li></ul>
Ok, ma come sono fatte? <ul><li>Javascript  ormai è ovunque
HTML con un buon supporto alle funzionalità HTML5 275 punti su 400 secondo  http://beta.html5test.com/
Flash   /  C (embedded)  (NPAPI) </li></ul>Non è solo hype! Silverlight
Struttura di base <ul><li>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 </li></ul>
Upcoming SlideShare
Loading in …5
×

Sviluppare estensioni per google chrome

4,805 views

Published on

Ormai tutti i browser mettono a disposizione strumenti per l'interfacciamento tramite plugin scritti sempre più spesso usando le classiche tecnologie web, quali Javascript e HTML.
In questa sessione verrà effettuata una prima presentazione della struttura di un plugin per Google Chrome e le funzionalità a cui è possibile accedere attraverso questo; verranno poi analizzate alcune funzioni specifiche fornite dalle API, infine vedremo la procedura di pubblicazione dell'applicazione

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,805
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sviluppare estensioni per google chrome

  1. 1. Sviluppare plugin (chiamiamole extension) per Google Chrome Marco Vito Moscaritolo UGI ALT.NET
  2. 2. 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.org Mail: [email_address]
  3. 3. Cosa vedremo? <ul><li>Perché sviluppare estensioni per browser perché proprio per Google Chrome
  4. 4. Che tipologie di estesioni possiamo realizzare quanta scelta... forse troppa?
  5. 5. La struttura di base di un estensione
  6. 6. Le funzionalità implementate (API) o meglio, quelle già implementa in da altri in modo da lavorare meno noi!
  7. 7. Interfaccia con strumenti di pagamento in qualche modo bisogna pur campare...
  8. 8. Gli strumenti di debug non siamo perfetti, potremmo fare pure qualche errore?
  9. 9. Il deploy dell'applicazione
  10. 10. Il mantenimento di un applicazione azz, ma dobbiamo proprio farlo noi? </li></ul>
  11. 11. Vantaggi nello sviluppare estensioni per browser? <ul><li>100% dei PC (normalmente) hanno un browser
  12. 12. Quasi tutti i browser supportano plugin (IE9, FF3/4, Google Chrome , Opera, …)
  13. 13. Possibilità di usare linguaggi molto conosciuti (javascript, HTML, XML/XUL …)
  14. 14. Possibilità di superare alcuni limiti di javascript con le API interne (browser-specifiche) </li></ul>
  15. 15. Andamento (mondo) http://gs.statcounter.com/
  16. 16. Andamento (Europa) http://gs.statcounter.com/
  17. 17. Andamento (Italia) http://gs.statcounter.com/
  18. 18. Le tre tipologie principali <ul>Modalità di esecuzione <li>Nelle tabs
  19. 19. In pop-up
  20. 20. Nelle pagine
  21. 21. In background </li></ul>Script
  22. 22. Tipologie di estesioni <ul>locali... <li>Rapidi nell'esecuzione
  23. 23. Disponibilità off-line
  24. 24. Utilizzo all'interno di altri siti
  25. 25. Possono compiere operazioni in background </li></ul><ul>...remote <li>Maggior controllo
  26. 26. Funzionalità gestibili lato server
  27. 27. Facilità di analisi dei problemi riscontrati non devo basarmi SOLO sui feedback degli utenti </li></ul>
  28. 28. Ok, ma come sono fatte? <ul><li>Javascript ormai è ovunque
  29. 29. HTML con un buon supporto alle funzionalità HTML5 275 punti su 400 secondo http://beta.html5test.com/
  30. 30. Flash / C (embedded) (NPAPI) </li></ul>Non è solo hype! Silverlight
  31. 31. Struttura di base <ul><li>File di dichiarazione del plugin (manifest.json) un banalissimo file JSON
  32. 32. Cartella di localizzazione (_locales) con sotto cartelle per ogni lingua lingue secondo le regole IETF language tags
  33. 33. File HTML, JS, CSS ed immagini a piacere per condire il tutto alcuni file hanno nomi secondo convenzioni </li></ul>
  34. 34. manifest.json <ul><li>{
  35. 35. &quot; name &quot;: &quot;Demo Alt.Net&quot;,
  36. 36. &quot; version &quot;: &quot;0.1&quot;,
  37. 37. &quot; description &quot;: &quot;alt.net conference extension&quot;,
  38. 38. &quot; icons &quot;: {
  39. 39. &quot;48&quot;: &quot;imgs/icon48.png&quot;,
  40. 40. &quot;64&quot;: &quot;imgs/icon64.png&quot;,
  41. 41. },
  42. 42. &quot; default_locale &quot;: &quot;en_US&quot;,
  43. 43. &quot; browser_action &quot;: {
  44. 44. &quot;default_title&quot;: &quot;__MSG_app_title__&quot;,
  45. 45. &quot;default_icon&quot;: &quot;imgs/icon48.png&quot;,
  46. 46. &quot;popup&quot;: &quot;generator.html&quot;
  47. 47. },
  48. 48. &quot; options_page &quot;: &quot; options.html &quot;,
  49. 49. &quot; permissions &quot;: [
  50. 50. &quot;tabs&quot;,
  51. 51. &quot;notifications&quot;,
  52. 52. &quot;http://ugialt.net/*&quot;,
  53. 53. ],
  54. 54. &quot; homepage_url &quot;: &quot;http://ugialt.net/&quot;
  55. 55. } </li></ul><ul><li>I nformazioni di base dell'estensione </li></ul><ul><li>Localizzazione </li></ul><ul><li>Interazione con il browser
  56. 56. Pagina di setup </li></ul><ul><li>Permessi
  57. 57. Altre informazioni </li></ul>
  58. 58. Localizzazione Codice del file: _locales/en_US/messages.json { &quot; app_title &quot;: { &quot;message&quot;: &quot;Alt.Net conference&quot; } &quot; date_label &quot; : { &quot;message&quot; : &quot;Milano - 19 Febbraio 2011&quot; }, ... } Utilizzo in manifest.json : &quot;default_title&quot; : &quot;__MSG_ app_title __&quot; Nell'applicazione: chrome.i18n.getMessage(&quot; app_title &quot;);
  59. 59. Pagina di configurazione <ul><li>Definita in maniefst.json </li></ul><ul><li>Accessibile automaticamente nel menu del plugin </li></ul><ul><li>Possibilità di salvare impostazioni in locale tramite localStorage :
  60. 60. var username = localStorage [' username ']; </li></ul>
  61. 61. I permessi <ul><li>&quot; permissions &quot;: [
  62. 62. &quot;tabs&quot;,
  63. 63. &quot;geolocation&quot;
  64. 64. &quot;unlimitedStorage&quot;
  65. 65. &quot;history&quot;,
  66. 66.
  67. 67. &quot;http://ugialt.net/&quot;, </li></ul><ul><li>&quot;http://*.ugialt.net/&quot;,
  68. 68. &quot;http://*.*/wp-admin/*&quot;, </li></ul><ul><li>], </li></ul><ul><li>Accesso alle singole funzionalità: </li><ul><li>gestione tabs
  69. 69. geolocation
  70. 70. storage locale
  71. 71. cronologia
  72. 72. notifiche
  73. 73. … </li></ul><li>Accesso a chiamate XHR con autorizzazione per dominio </li></ul>
  74. 74. Estensione in popup <ul><li>Informazione nel manifest.json : </li></ul>&quot; browser_action &quot;: { &quot; popup &quot;: &quot;generator.html&quot; }, <ul><li>Popup gestibili a runtime (aggiunta, rimozione, settaggi, ...)
  75. 75. Possibilità di modificare a runtime il comportamento delle icone (notifiche agli utenti) attraverso: </li></ul>chrome.browserAction.setBadgeBackgroundColor({ Color:[208, 0, 24, 255] }); chrome.browserAction.setIcon({ path: &quot;gmail_logged_in.png&quot; });
  76. 76. Estensione in tabs <ul>Informazione nel manifest.json : </ul>&quot; app &quot;: { // Applicazione locale &quot;launch&quot;: { &quot;local_path&quot;: &quot;main.html&quot; } // Applcazione remota &quot;urls&quot;: [ &quot;*://ugialt.net/app/&quot; ], &quot;launch&quot;: { &quot;web_url&quot;: &quot;http://ugialt.net/app/&quot; } }, <ul>NB : Ricordarsi dei permessi di accesso al dominio dell'applicazione per applicazioni remote </ul>
  77. 77. Estensione in background <ul><li>Informazione nel manifest.json : </li></ul>&quot; background_page &quot;: &quot;background.html&quot;, <ul><li>Architettura basata su messaggi o connessioni persistenti tra pagina di background e altri elementi (popup, tabs, servizi remoti, altre pagine …) </li></ul>
  78. 78. Estensioni content script <ul><li>Informazione nel manifest.json : </li></ul>&quot; content_scripts &quot;: [ { &quot;matches&quot;: [&quot;http://ugialt.net/*&quot;], &quot;css&quot;: [&quot;css/mystyles.css&quot;], &quot;js&quot;: [&quot;js/myscript.js&quot;] } ], <ul><li>Permette di inserire codice all'interno di pagine web a cui non si ha direttamente accesso, per integrarne funzionalità o modificarne il comportamento </li></ul>
  79. 79. Estensioni native <ul><li>Informazione nel manifest.json : </li></ul>&quot; plugins &quot;: [ { &quot;path&quot;: &quot;plugins/ugialt.dll&quot; } { &quot;path&quot;: &quot;plugins/ugialt.so&quot; } { &quot;path&quot;: &quot;plugins/ugialt_64.so&quot; } ], <ul><li>Permette di inserire codice scritto in C / C++ secondo le specifiche NPAPI che può essere richiamato in javascript </li></ul><embed type=&quot;application/x-altnet&quot; id=&quot;ugialtnet&quot;> <script> var UAN= document.getElementById(&quot;ugialtnet&quot;); var result = UAN.getTalks(); </script>
  80. 80. ...tanti tipi di estensioni, ma con lo stesso approccio <ul><li>Gestione asincrona delle chiamate
  81. 81. Gestione ad eventi come per il DOM </li></ul>chrome.tabs.onCreated.addListener( function(Tab tab) { console.log(“Aperta tab: ” + tab.url); } ); chrome.history.onVisited.addListener( function(HistoryItem result) { alert(result.visitCount); } );
  82. 82. Che API fornisce? <ul><li>chrome.bookmarks.*
  83. 83. chrome.browserAction.*
  84. 84. chrome.contextMenus.*
  85. 85. chrome.cookies.*
  86. 86. chrome.extension.*
  87. 87. chrome.history.*
  88. 88. chrome.i18n.* </li></ul><ul><li>chrome.idle.*
  89. 89. chrome.management.*
  90. 90. chrome.omnibox.*
  91. 91. chrome.pageAction.*
  92. 92. chrome.tabs.*
  93. 93. chrome.windows.* </li></ul>...possono bastare, ma...
  94. 94. ...stanno arrivando anche... <ul><ul><li>chrome.experimental.clipboard.*
  95. 95. chrome.experimental.infobars.*
  96. 96. chrome.experimental.processes.*
  97. 97. chrome.experimental.proxy.*
  98. 98. chrome.experimental.sidebar.*
  99. 99. chrome.experimental.webNavigation.*
  100. 100. chrome.experimental.webRequest.* </li></ul></ul>...che sono “sperimentali”, ma utilizzabili! (NB: richiedono il permesso “experimental”)
  101. 101. 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' });
  102. 102. Piattaforma di pagamento di Google <ul><li>Attraverso il sistema di pagamento di Google </li></ul>
  103. 103. pagamento per nazione! novità di due giorni fa
  104. 104. Strumenti di Debug <ul><li>Gli stessi per il debug delle pagine web alla fine si tratta proprio di pagine web e javascript </li></ul><ul><li>Extension ID
  105. 105. Code </li></ul>
  106. 106. Pubblicazione dell'estensione <ul><li>Creare il proprio account sviluppatore
  107. 107. Creare ZIP dell'estensione
  108. 108. Caricarla all'interno del Google App Store
  109. 109. Testare la procedura di pubblicazione con account testar </li></ul>
  110. 110. Setup per la pubblicazione <ul><li>Dati di base </li><ul><li>Categorie
  111. 111. Immagini
  112. 112. Descrizioni
  113. 113. Link
  114. 114. Link al sito, alle FAQ, .. </li></ul><li>Account di tracciamento (GA)
  115. 115. Versioning dell'applicazione con possibilità di revert </li></ul>
  116. 116. Il mantenimento <ul><li>Versioning automatico dell'estensione basato sul numero di versione inserito nel manifest
  117. 117. Possibilità di rilasciare un aggiornamento agli utenti inseriti come tester
  118. 118. Notifica degli aggiornamenti delle estensioni automatica (anche da server esterni al marketplace di google)
  119. 119. Possibilità di effettuare il REVERT di una versione della nostra estensione </li></ul>
  120. 120. È tutto oro quello che luccica?
  121. 121. Domande ? Grazie per l'attenzione!
  122. 122. Reference Documentazione ufficiale: <ul><li>http://code.google.com/chrome/extensions/ </li></ul>Developer dashboard: <ul><li>https://chrome.google.com/webstore/developer/dashboard </li></ul>Presentazioni disponibili: <ul><li>http://www.slideshare.net/mihaiionescu/google-chrome-extensions-devfest09
  123. 123. http://www.slideshare.net/taobaoued/chrome-extension-develop-starts </li></ul>Legalese: <ul><li>https://chrome.google.com/extensions/intl/en/program_policies.html
  124. 124. https://chrome.google.com/extensions/intl/en/dev_tos_text.html </li></ul>

×