Sviluppare estensioni per google chrome
Download as odp, pdf0 likes2,560 views
Il documento presenta una panoramica dello sviluppo di estensioni per Google Chrome, esplorando le motivazioni, i tipi di estensioni, e le strutture basilari necessarie per crearle. Viene discusso l'utilizzo delle API, la gestione dei permessi e il deployment delle applicazioni, insieme a suggerimenti per strumenti di debug e interfacciamento con i sistemi di pagamento. Inoltre, il documento offre riferimenti a risorse utili e a documentazione ufficiale per gli sviluppatori.
![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]](https://image.slidesharecdn.com/slide2-110223150612-phpapp02/85/Sviluppare-estensioni-per-google-chrome-2-320.jpg)
Sviluppare estensioni per google chrome
- 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? 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?
- 10. Il mantenimento di un applicazione azz, ma dobbiamo proprio farlo noi?
- 11. Vantaggi nello sviluppare estensioni per browser? 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)
- 18. Le tre tipologie principali Modalità di esecuzione Nelle tabs
- 19. In pop-up
- 20. Nelle pagine
- 22. Tipologie di estesioni locali... Rapidi nell'esecuzione
- 24. Utilizzo all'interno di altri siti
- 25. Possono compiere operazioni in background ...remote Maggior controllo
- 26. Funzionalità gestibili lato server
- 27. Facilità di analisi dei problemi riscontrati non devo basarmi SOLO sui feedback degli utenti
- 28. Ok, ma come sono fatte? 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) Non è solo hype! Silverlight
- 31. Struttura di base 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
- 34. manifest.json {
- 35. " name ": "Demo Alt.Net",
- 36. " version ": "0.1",
- 37. " description ": "alt.net conference extension",
- 38. " icons ": {
- 41. },
- 42. " default_locale ": "en_US",
- 47. },
- 48. " options_page ": " options.html ",
- 53. ],
- 54. " homepage_url ": "http://ugialt.net/"
- 55. } I nformazioni di base dell'estensione Localizzazione Interazione con il browser
- 56. Pagina di setup Permessi
- 58. 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 ");
- 59. Pagina di configurazione Definita in maniefst.json Accessibile automaticamente nel menu del plugin Possibilità di salvare impostazioni in locale tramite localStorage :
- 60. var username = localStorage [' username '];
- 61. I permessi " permissions ": [
- 66. …
- 68. "http://*.*/wp-admin/*", ], Accesso alle singole funzionalità: gestione tabs
- 69. geolocation
- 70. storage locale
- 71. cronologia
- 72. notifiche
- 73. … Accesso a chiamate XHR con autorizzazione per dominio
- 74. Estensione in popup Informazione nel manifest.json : " browser_action ": { " popup ": "generator.html" }, Popup gestibili a runtime (aggiunta, rimozione, settaggi, ...)
- 75. 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" });
- 76. 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
- 77. 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 …)
- 78. 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
- 79. 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 <embed type="application/x-altnet" id="ugialtnet"> <script> var UAN= document.getElementById("ugialtnet"); var result = UAN.getTalks(); </script>
- 80. ...tanti tipi di estensioni, ma con lo stesso approccio Gestione asincrona delle chiamate
- 81. 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); } );
- 82. Che API fornisce? chrome.bookmarks.*
- 85. chrome.cookies.*
- 87. chrome.history.*
- 90. chrome.omnibox.*
- 92. chrome.tabs.*
- 93. chrome.windows.* ...possono bastare, ma...
- 94. ...stanno arrivando anche... chrome.experimental.clipboard.*
- 100. chrome.experimental.webRequest.* ...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 Attraverso il sistema di pagamento di Google
- 103. pagamento per nazione! novità di due giorni fa
- 104. Strumenti di Debug Gli stessi per il debug delle pagine web alla fine si tratta proprio di pagine web e javascript Extension ID
- 105. Code
- 106. Pubblicazione dell'estensione Creare il proprio account sviluppatore
- 108. Caricarla all'interno del Google App Store
- 109. Testare la procedura di pubblicazione con account testar
- 110. Setup per la pubblicazione Dati di base Categorie
- 111. Immagini
- 112. Descrizioni
- 113. Link
- 114. Link al sito, alle FAQ, .. Account di tracciamento (GA)
- 115. Versioning dell'applicazione con possibilità di revert
- 116. Il mantenimento 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
- 120. È tutto oro quello che luccica?
- 121. Domande ? Grazie per l'attenzione!
- 122. 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