Creando Una Extensión de Chrome

75
CÓMO CREAR UNA EXTENSIÓN DE CHROME Juliana Peña http://julianapena.com @limitedmage Día ISC 7 abril 2010

Transcript of Creando Una Extensión de Chrome

Page 1: Creando Una Extensión de Chrome

CÓMO CREAR UNA EXTENSIÓN DE CHROMEJuliana Peña http://julianapena.com@limitedmage

Día ISC7 abril 2010

Page 2: Creando Una Extensión de Chrome

ObjetivosConocer qué puede o no hacer una extensión y qué constituye a una extensiónUsar JavaScript, HTML y CSS para crear una extensión de Chrome de una «To Do List»Ejecutar extensiones en ChromePublicar extensiones en la galería de GoogleUsar el inspector y depurador de Chrome

Page 3: Creando Una Extensión de Chrome

Conocimientos recomendados

Page 4: Creando Una Extensión de Chrome

Requerimientos de Software

Page 5: Creando Una Extensión de Chrome

INTRODUCCIÓN A EXTENSIONES DE CHROME

Page 6: Creando Una Extensión de Chrome

¿Qué puede hacer una extensión?Inyectar JavaScript y CSS a páginas (ala GreaseMonkey)Agregar botones con popups al toolbar del navegadorAcceder a bookmarks, tabs, y ventanasHacer peticiones de Ajax en otros dominiosCambiar página de inicio (chrome://newtab)Comunicación dentro y entre extensionesAlternativamente, una extensión puede ser un temaTener una extensión en mútliples idiomas para localizaciónUsar NPAPI para usar plugins dentro de extensiones

Page 7: Creando Una Extensión de Chrome

¿Qué no puede hacer?Agregar toolbarsManipular protocolosAgregar items a menúsInyectar JavaScript o CSS a procesos de extensiones

Page 8: Creando Una Extensión de Chrome

Componentes de una extensión

Page 9: Creando Una Extensión de Chrome

Temas a cubrir1. manifest.json para declarar extensiones2. Cargar extensión no empaquetada en Chrome3. Agregar un botón (browser action) a Chrome4. Cargar un popup HTML en el botón5. Usar JavaScript y CSS para darle interactividad y

diseño al popup6. Usar objecto localStorage para guardar datos7. Usar el API chrome.browserAction para agregar un

badge sobre el botón8. Usar i18n para desarrollar una extensión multilingüe9. Publicar extensiones en la galería oficial

10. Usar los devtools para inspeccionar y depurar extensiones

Page 10: Creando Una Extensión de Chrome

VERSIÓN 0Extensión vacía

Page 11: Creando Una Extensión de Chrome

1. Extensión vacíamanifest.jsonSiempre debe tener:

NombreVersión

Recomendable tener:DescripciónÍconos

Page 12: Creando Una Extensión de Chrome

2. Cargar la extensión en Chrome

Page 13: Creando Una Extensión de Chrome

2. Cargar la extensión en Chrome

Page 14: Creando Una Extensión de Chrome

VERSIÓN 1Agregar botón al toolbar

Page 15: Creando Una Extensión de Chrome

3. Agregar imagen 19x19

Page 16: Creando Una Extensión de Chrome

4. Modificar manifest.json

Page 17: Creando Una Extensión de Chrome

5. Recargar extensión

Page 18: Creando Una Extensión de Chrome

VERSIÓN 2Agregar popup al botón

Page 19: Creando Una Extensión de Chrome

6. Crear popup.html

Page 20: Creando Una Extensión de Chrome

7. Modificar manifest.json

Page 21: Creando Una Extensión de Chrome

8. Recargar extensión

Page 22: Creando Una Extensión de Chrome

VERSIÓN 3Crear librería para manejo de ToDos

Page 23: Creando Una Extensión de Chrome

9. Copiar jQuery a extensión

Page 24: Creando Una Extensión de Chrome

10. Crear biblioteca para ToDos, todo.js

Page 25: Creando Una Extensión de Chrome

11. Modificar popup.html

Page 26: Creando Una Extensión de Chrome

12. Recargar extensión

Page 27: Creando Una Extensión de Chrome

VERSIÓN 4Agregar ToDos

Page 28: Creando Una Extensión de Chrome

13. Modificar popup.html

Page 29: Creando Una Extensión de Chrome

14. Recargar extensión

Page 30: Creando Una Extensión de Chrome

VERSIÓN 5Eliminar ToDos

Page 31: Creando Una Extensión de Chrome

15. Modificar popup.html

Page 32: Creando Una Extensión de Chrome

16. Recargar extensión

Page 33: Creando Una Extensión de Chrome

VERSIÓN 6 Guardar datos

Page 34: Creando Una Extensión de Chrome

localStorageObjecto de JavaScript en HTML5 que permite que sitios web y extensiones almacenen datos en disco localLlave y valor deben ser stringsParecido a cookies

Guardar datos:localStorage["miopcion"] = "mivalor";

Cargar datos:mivariable = localStorage["miopcion"];

Page 35: Creando Una Extensión de Chrome

Guardar objetos en localStorageObjetos y arreglos no se pueden guardar directamente, deben convertirse a stringsSe puede usar formato JSONChrome provee métodos para usar JSON fácilmente

Objectos a strings:mistring = JSON.stringify(miobjecto);

Strings en JSON a objetos:miobjecto = JSON.parse(mistring);

Page 36: Creando Una Extensión de Chrome

17. Modificar todo.js para cargar lista desde JSON

Page 37: Creando Una Extensión de Chrome

18. Modificar popup.html para cargar y guardar JSON con localStorage

Page 38: Creando Una Extensión de Chrome

19. Recargar extensión

Page 39: Creando Una Extensión de Chrome

VERSIÓN 7Separar código en archivos, agregar animaciones

Page 40: Creando Una Extensión de Chrome

20. Crear popup.css, popup.js

Page 41: Creando Una Extensión de Chrome

21. Mover JavaScript de popup.html a popup.js, mover CSS de popup.html a popup.css, modificar para animaciones

Page 42: Creando Una Extensión de Chrome

22. Recargar extensión

Page 43: Creando Una Extensión de Chrome

VERSIÓN 8Badge para contar ToDos

Page 44: Creando Una Extensión de Chrome

Badges en Browser ActionMostrar un texto corto (hasta 4 caracteres) encima del íconoExcelente para mostrar mensajes no leídos o ToDos sin hacer

Establecer color:chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

Establecer texto:chrome.browserAction.setBadgeText({text: 'hola'});

Page 45: Creando Una Extensión de Chrome

23. Modificar popup.js

Page 46: Creando Una Extensión de Chrome

24. Recargar extensión

Page 47: Creando Una Extensión de Chrome

VERSIÓN 9Internacionalización (i18n)

Page 48: Creando Una Extensión de Chrome

Configuración de localizaciónPara localización, se debe crear una carpeta _locales, y dentro de esta una carpeta para cada local

Cada una de estas carpetas tendrá un archivo messages.json con información de mensajesLocales soportados son:

am ar bg bn ca cs da de el en en_GB en_US es es_419 et fi fil fr gu he hi hr hu id it ja kn ko lt lv ml mr nb nl or pl pt pt_BR pt_PT ro ru sk sl sr sv sw ta te th tr uk vi zh zh_CN zh_TW

Page 49: Creando Una Extensión de Chrome

25. Crear _locales/en/messages.json para inglés

Page 50: Creando Una Extensión de Chrome

26. Crear _locales/es/message.json para español

Page 51: Creando Una Extensión de Chrome

Acceder a mensajesDesde el manifesto, se puede acceder a un mensaje usando el forma

"__MSG_mensaje__"

Desde JavaScript, se puede acceder a un mensaje usando el API de i18n

chrome.i18n.getMessage('mensaje')

Page 52: Creando Una Extensión de Chrome

27. Modificar manifest.json para usar i18n

Page 53: Creando Una Extensión de Chrome

28. Modificar popup.html para quitar texto estático

Page 54: Creando Una Extensión de Chrome

29. Modificar popup.js para llenar información de i18n

Page 55: Creando Una Extensión de Chrome

31. Cambiar idioma de Chrome para ensayar extensión localizada

Page 56: Creando Una Extensión de Chrome

32. Recargar extensión

Page 57: Creando Una Extensión de Chrome

PUBLICAR LA EXTENSIÓNGalería de Chrome

Page 58: Creando Una Extensión de Chrome

1. Crea un zip de la carpeta de la extensión

Page 59: Creando Una Extensión de Chrome

2. Entra al dashboard con tu cuenta de Google

Page 60: Creando Una Extensión de Chrome

3. Crea una nueva extensión y sube el Zip

Page 61: Creando Una Extensión de Chrome

4. Agrega idioma, descripción, imágenes, videos, etc.

Page 62: Creando Una Extensión de Chrome

5. ¡Publica tu extensión!

Page 63: Creando Una Extensión de Chrome

6. Tu extensión se publicará y otros la podrán descargar y usar.

Page 64: Creando Una Extensión de Chrome

¡YA COMPLETASTE UNA EXTENSIÓN ÚTIL!¿Qué sigue?

Page 65: Creando Una Extensión de Chrome

Retos para mejorar la extensiónImplementar fechas límite con recordatorios

Usar página de fondo para tomar tiemposMostrar recordatorios usando window.webkitNotifications

Agregar ToDos a partir de texto seleccionado en páginaUsar un content script para comunicarse con página y recuperar el texto seleccionado

Usar Ajax para guardar información en servidorSincronizar diferentes instancias de la extensión de un usuario

Page 66: Creando Una Extensión de Chrome

DEPURANDO EXTENSIONESDeveloper Tools de Chrome

Page 67: Creando Una Extensión de Chrome

Ejecutando inspector en popup

Page 68: Creando Una Extensión de Chrome

Ejecutando inspector para otras vistas

Page 69: Creando Una Extensión de Chrome

ElementsInspectar DOM y analizar estilos y eventos

Page 70: Creando Una Extensión de Chrome

ResourcesVer todos los recursos que llama la extensión, incluyendo AJAX, con tiempos de carga y tamaños

Page 71: Creando Una Extensión de Chrome

ScriptsDepurador de JavaScript, con breakpoints y análisis de Stack

Page 72: Creando Una Extensión de Chrome

StorageMuestra almacenamiento local, incluyendo cookies y localStorage

Page 73: Creando Una Extensión de Chrome

ConsoleConsola de JavaScript, para ejecutar código arbitrario

También se puede abrir debajo de cualquier tab con el botón

Page 74: Creando Una Extensión de Chrome

¿PREGUNTAS?

Page 75: Creando Una Extensión de Chrome

Más información