Your SlideShare is downloading. ×
0
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sviluppare estensioni per google chrome

4,063

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. …

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,063
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sviluppare plugin (chiamiamole extension) per Google Chrome Marco Vito Moscaritolo UGI ALT.NET
  • 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. Cosa vedremo? <ul><li>Perché sviluppare estensioni per browser perché proprio per Google Chrome
  • 4. Che tipologie di estesioni possiamo realizzare quanta scelta... forse troppa?
  • 5. La struttura di base di un estensione
  • 6. Le funzionalità implementate (API) o meglio, quelle già implementa in da altri in modo da lavorare meno noi!
  • 7. Interfaccia con strumenti di pagamento in qualche modo bisogna pur campare...
  • 8. Gli strumenti di debug non siamo perfetti, potremmo fare pure qualche errore?
  • 9. Il deploy dell'applicazione
  • 10. Il mantenimento di un applicazione azz, ma dobbiamo proprio farlo noi? </li></ul>
  • 11. Vantaggi nello sviluppare estensioni per browser? <ul><li>100% dei PC (normalmente) hanno un browser
  • 12. Quasi tutti i browser supportano plugin (IE9, FF3/4, Google Chrome , Opera, …)
  • 13. Possibilità di usare linguaggi molto conosciuti (javascript, HTML, XML/XUL …)
  • 14. Possibilità di superare alcuni limiti di javascript con le API interne (browser-specifiche) </li></ul>
  • 15. Andamento (mondo) http://gs.statcounter.com/
  • 16. Andamento (Europa) http://gs.statcounter.com/
  • 17. Andamento (Italia) http://gs.statcounter.com/
  • 18. Le tre tipologie principali <ul>Modalità di esecuzione <li>Nelle tabs
  • 19. In pop-up
  • 20. Nelle pagine
  • 21. In background </li></ul>Script
  • 22. Tipologie di estesioni <ul>locali... <li>Rapidi nell'esecuzione
  • 23. Disponibilità off-line
  • 24. Utilizzo all'interno di altri siti
  • 25. Possono compiere operazioni in background </li></ul><ul>...remote <li>Maggior controllo
  • 26. Funzionalità gestibili lato server
  • 27. Facilità di analisi dei problemi riscontrati non devo basarmi SOLO sui feedback degli utenti </li></ul>
  • 28. Ok, ma come sono fatte? <ul><li>Javascript ormai è ovunque
  • 29. HTML con un buon supporto alle funzionalità HTML5 275 punti su 400 secondo http://beta.html5test.com/
  • 30. Flash / C (embedded) (NPAPI) </li></ul>Non è solo hype! Silverlight
  • 31. Struttura di base <ul><li>File di dichiarazione del plugin (manifest.json) un banalissimo file JSON
  • 32. Cartella di localizzazione (_locales) con sotto cartelle per ogni lingua lingue secondo le regole IETF language tags
  • 33. File HTML, JS, CSS ed immagini a piacere per condire il tutto alcuni file hanno nomi secondo convenzioni </li></ul>
  • 34. manifest.json <ul><li>{
  • 35. &quot; name &quot;: &quot;Demo Alt.Net&quot;,
  • 36. &quot; version &quot;: &quot;0.1&quot;,
  • 37. &quot; description &quot;: &quot;alt.net conference extension&quot;,
  • 38. &quot; icons &quot;: {
  • 39. &quot;48&quot;: &quot;imgs/icon48.png&quot;,
  • 40. &quot;64&quot;: &quot;imgs/icon64.png&quot;,
  • 41. },
  • 42. &quot; default_locale &quot;: &quot;en_US&quot;,
  • 43. &quot; browser_action &quot;: {
  • 44. &quot;default_title&quot;: &quot;__MSG_app_title__&quot;,
  • 45. &quot;default_icon&quot;: &quot;imgs/icon48.png&quot;,
  • 46. &quot;popup&quot;: &quot;generator.html&quot;
  • 47. },
  • 48. &quot; options_page &quot;: &quot; options.html &quot;,
  • 49. &quot; permissions &quot;: [
  • 50. &quot;tabs&quot;,
  • 51. &quot;notifications&quot;,
  • 52. &quot;http://ugialt.net/*&quot;,
  • 53. ],
  • 54. &quot; homepage_url &quot;: &quot;http://ugialt.net/&quot;
  • 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. Pagina di setup </li></ul><ul><li>Permessi
  • 57. Altre informazioni </li></ul>
  • 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. 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. var username = localStorage [' username ']; </li></ul>
  • 61. I permessi <ul><li>&quot; permissions &quot;: [
  • 62. &quot;tabs&quot;,
  • 63. &quot;geolocation&quot;
  • 64. &quot;unlimitedStorage&quot;
  • 65. &quot;history&quot;,
  • 66. …
  • 67. &quot;http://ugialt.net/&quot;, </li></ul><ul><li>&quot;http://*.ugialt.net/&quot;,
  • 68. &quot;http://*.*/wp-admin/*&quot;, </li></ul><ul><li>], </li></ul><ul><li>Accesso alle singole funzionalità: </li><ul><li>gestione tabs
  • 69. geolocation
  • 70. storage locale
  • 71. cronologia
  • 72. notifiche
  • 73. … </li></ul><li>Accesso a chiamate XHR con autorizzazione per dominio </li></ul>
  • 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. 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. 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. 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. 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. 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. ...tanti tipi di estensioni, ma con lo stesso approccio <ul><li>Gestione asincrona delle chiamate
  • 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. Che API fornisce? <ul><li>chrome.bookmarks.*
  • 83. chrome.browserAction.*
  • 84. chrome.contextMenus.*
  • 85. chrome.cookies.*
  • 86. chrome.extension.*
  • 87. chrome.history.*
  • 88. chrome.i18n.* </li></ul><ul><li>chrome.idle.*
  • 89. chrome.management.*
  • 90. chrome.omnibox.*
  • 91. chrome.pageAction.*
  • 92. chrome.tabs.*
  • 93. chrome.windows.* </li></ul>...possono bastare, ma...
  • 94. ...stanno arrivando anche... <ul><ul><li>chrome.experimental.clipboard.*
  • 95. chrome.experimental.infobars.*
  • 96. chrome.experimental.processes.*
  • 97. chrome.experimental.proxy.*
  • 98. chrome.experimental.sidebar.*
  • 99. chrome.experimental.webNavigation.*
  • 100. chrome.experimental.webRequest.* </li></ul></ul>...che sono “sperimentali”, ma utilizzabili! (NB: richiedono il permesso “experimental”)
  • 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. Piattaforma di pagamento di Google <ul><li>Attraverso il sistema di pagamento di Google </li></ul>
  • 103. pagamento per nazione! novità di due giorni fa
  • 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. Code </li></ul>
  • 106. Pubblicazione dell'estensione <ul><li>Creare il proprio account sviluppatore
  • 107. Creare ZIP dell'estensione
  • 108. Caricarla all'interno del Google App Store
  • 109. Testare la procedura di pubblicazione con account testar </li></ul>
  • 110. Setup per la pubblicazione <ul><li>Dati di base </li><ul><li>Categorie
  • 111. Immagini
  • 112. Descrizioni
  • 113. Link
  • 114. Link al sito, alle FAQ, .. </li></ul><li>Account di tracciamento (GA)
  • 115. Versioning dell'applicazione con possibilità di revert </li></ul>
  • 116. Il mantenimento <ul><li>Versioning automatico dell'estensione basato sul numero di versione inserito nel manifest
  • 117. Possibilità di rilasciare un aggiornamento agli utenti inseriti come tester
  • 118. Notifica degli aggiornamenti delle estensioni automatica (anche da server esterni al marketplace di google)
  • 119. Possibilità di effettuare il REVERT di una versione della nostra estensione </li></ul>
  • 120. È tutto oro quello che luccica?
  • 121. Domande ? Grazie per l'attenzione!
  • 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. 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. https://chrome.google.com/extensions/intl/en/dev_tos_text.html </li></ul>

×