Extensiones y Webapps para Chrome

Un pequeño tutorial de cómo crear extensiones y/o webapps para Chrome, un navegador que, en su corto tiempo de vida, ha crecido de sobremanera. Presentación realizada en http://goo.gl/5pnxJ

Transcript

1. Creación de Extensiones y Webapps para Chrome, #MTI Meetup Temuco Patrick D’appollonio Vega, @Marlex
2. ¿Quién soy? Egresado de Ingeniería en Informática, yendo a la Ingeniería Civil. Primero radio, luego weblogger, luego diseñador publicitario, luego informático. Vivo de Internet, pero buscando trabajo. Capo, aunque no experto, en SEO, SEM, Social Media, Android, la web (HTML 4/5, CSS 2/3, Javascript, XHR (AJAX), y un etcétera. Más de 8 años de historia conociendo Internet (4 años programando)
3. Extensiones y Webapps de Chrome Una nueva plataforma de desarrollo, muy amplia: la web
4. ¿Por qué Chrome? Fácil de usar, simple y rápido Muy seguro, cada proceso corre en un sandbox (aislado del resto) y muy eficiente, motor propio de JS (V8) y Flash optimizado por Google Soporte en notebooks, netbooks, computadores de escritorio y chromebooks No requiere aprender un nuevo lenguaje, se puede usar el framework que más te guste (jQuery, Mootools, Script.aculo.us, etc) o programar todo tú mismo Cantidad de usuarios creciente
5. Estadísticas Globales
6. Extensiones Son sitios web Utilizan HTML, Javascript, CSS y cualquier tecnología web para funcionar Puede usar servicios server-side (backend) aunque la idea es usar client-side y no pagar hosting, por lo que sólo hay costos de desarrollo y mantención Utiliza permisos, como Android, para su funcionamiento Tienen un ícono (aunque pueden no tenerlo) que los identifica, al costado del Omnibox
7. Webapps Pueden ser sitios web con propiedades extra (alojamiento offline infinito de HTML5, soporte peticiones AJAX a cualquier lado...) o “extensiones” que corran en el navegador Igualmente, pueden ser sitios web como las extensiones o aplicaciones completas programadas con native code (en desarrollo, gracias a los Chromebooks). Pueden usar Flash, comunicación con servidores (JSON, XML, etc), Java (no recomendado).
8. Beneficios de programar en Chrome Hay un market (Chrome Web Store), instalada en todo Chrome por defecto Pueden venderse “goods” (bienes) a través del formato de pago dentro de la App con Google Wallet (ex Google Checkout) Reduce costos de sitios web (puede haber una webapp que guarde todo el contenido multimedia y el frontend, dejando sólo los objetos de negocio en servidores) Amplia capacidad de debugging con el inspector de Webkit
9. Beneficios de programar en Chrome Si el usuario inició su sesión de Gmail en Chrome, la extensión o webapp se instala en todos sus dispositivos Pronto, Chrome y sus extensiones estarán en Android (Celulares y Tablets) y requerirá cambios pequeños para funcionar igual Cualquier cambio en la extensión, no requiere que el usuario deba reinstalar para ver los cambios, sólo se alertará si cambian los permisos Varios sitios registran automáticamente las nuevas extensiones como apps (Softonic.com, Softpedia.com, Softepic.com)
10. Estructura de una extensión manifest.json: Incluye la configuración básica de la extensión. icon.png: Ícono que se mostrará en el listado de extensiones y al lado del Omnibox background.html: Página que corre en segundo plano (optativo) popup.html: Página que se carga al hacer click sobre el ícono (optativo) settings.html: Página de opciones (optativo) Browser-action: Contiene un “pop-up” Page-action: Actúa sobre la página actual
11. Tips de las extensiones Una extensión puede cargar en una ventana en particular casi cualquier otro archivo, como hojas de estilo CSS, Javascript e imágenes, además de modificar lo que uno quiera, sólo se debe pedir “permiso”. No hay limitaciones de almacenamiento local (HTML5, capacidad normal: 5 Megas) ni de solicitudes XHR (AJAX) en un mismo dominio, es más, se puede consultar cualquier sitio web incluso si éste tiene bloqueadas las peticiones AJAX. Para guardar opciones de configuración, datos o más, se usa el API de almacenamiento local de HTML5.
12. manifest.json Requeridos: name version Recomendados: description icons default_locale Elegir una: browser_action page_action theme app Extras: background_page content_scripts minimum_chrome_version options_page permissions update_url key
13. icon.png (+) Puede ser un sólo ícono grande (recomendable 128x128) Se recomienda integrar 3 íconos formalmente: 16x16 (favicon) 48x48 (listado de extensiones) 128x128 (listado de extensiones, webapps y Chrome Web Store) Se recomienda usar PNG, aunque se puede usar JPG, GIF, ICO y... Brrrp! BMP.
14. background.html Permite ejecutar funciones en el fondo, ya sea siempre (no recomendado), cada cierto tiempo (mediante setTimeout y setInterval) o sólo al abrir el navegador. Sólo se ejecuta una vez, no se pueden ejecutar dos páginas background a la vez. Útil para cargar contenido como datos desde Internet, realizar procesos de fondo o “escuchar” eventos. Puede declararse incluso que se abra la primera vez y no se cierre más, es decir, que se ejecute cuando Chrome esté cerrado (!!!)
15. popup.html Es la ventana que se abre al momento de hacer click sobre un ícono browser-action. Puede cargar lo que quiera, es una web completa: desde Javascript, CSS, Java (applets), Flash, Silverlight... Si se requiere un alto control y seguridad sobre el código fuente (server-side), puede configurarse el popup para que cargue un mini sitio web desde un servidor en particular.
16. settings.html Permite acceder a una ventana especial de opciones, aunque en teoría se puede agregar cualquier cosa allí dentro. Se abre al presionar sobre el ícono del browser-action o page-action con el botón derecho y luego seleccionar “opciones”. Ideal para ubicar una página de configuraciones y guardar en el almacenamiento local todos los parámetros recogidos.
17. Cargar una extensión 1. Activo modo desarrollador Menú Herramienta > Herramientas > Extensiones 2. Cargo extensión descomprimida Para cargar la carpeta sin necesidad de comprimirla 3. Elijo la carpeta Que tiene la extensión y el manifest.json dentro 4. ¡Extensión cargada! Si se necesita recargar, presionar “cargar de nuevo”
18. ¡A programar! Ejemplos simples de programación ( http://tiny.cc/mti-demo --- GIT: https://bitbucket.org/ patrickdappollonio/mti-extension/)
19. Chrome Web Store Compartir con todo el mundo
20. Entrar a la Chrome Web Store    
21. Cargar una extensión
22. Extensión en la Store