creando una extensión de chrome
TRANSCRIPT
![Page 1: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/1.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/3.jpg)
Conocimientos recomendados
![Page 4: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/4.jpg)
Requerimientos de Software
![Page 5: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/5.jpg)
INTRODUCCIÓN A EXTENSIONES DE CHROME
![Page 6: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/6.jpg)
¿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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/7.jpg)
¿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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/8.jpg)
Componentes de una extensión
![Page 9: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/10.jpg)
VERSIÓN 0Extensión vacía
![Page 11: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/11.jpg)
1. Extensión vacíamanifest.jsonSiempre debe tener:
NombreVersión
Recomendable tener:DescripciónÍconos
![Page 12: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/12.jpg)
2. Cargar la extensión en Chrome
![Page 13: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/13.jpg)
2. Cargar la extensión en Chrome
![Page 14: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/14.jpg)
VERSIÓN 1Agregar botón al toolbar
![Page 15: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/15.jpg)
3. Agregar imagen 19x19
![Page 16: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/16.jpg)
4. Modificar manifest.json
![Page 17: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/17.jpg)
5. Recargar extensión
![Page 18: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/18.jpg)
VERSIÓN 2Agregar popup al botón
![Page 19: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/19.jpg)
6. Crear popup.html
![Page 20: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/20.jpg)
7. Modificar manifest.json
![Page 21: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/21.jpg)
8. Recargar extensión
![Page 22: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/22.jpg)
VERSIÓN 3Crear librería para manejo de ToDos
![Page 23: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/23.jpg)
9. Copiar jQuery a extensión
![Page 24: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/24.jpg)
10. Crear biblioteca para ToDos, todo.js
![Page 25: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/25.jpg)
11. Modificar popup.html
![Page 26: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/26.jpg)
12. Recargar extensión
![Page 27: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/27.jpg)
VERSIÓN 4Agregar ToDos
![Page 28: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/28.jpg)
13. Modificar popup.html
![Page 29: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/29.jpg)
14. Recargar extensión
![Page 30: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/30.jpg)
VERSIÓN 5Eliminar ToDos
![Page 31: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/31.jpg)
15. Modificar popup.html
![Page 32: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/32.jpg)
16. Recargar extensión
![Page 33: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/33.jpg)
VERSIÓN 6 Guardar datos
![Page 34: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/34.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/35.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/36.jpg)
17. Modificar todo.js para cargar lista desde JSON
![Page 37: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/37.jpg)
18. Modificar popup.html para cargar y guardar JSON con localStorage
![Page 38: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/38.jpg)
19. Recargar extensión
![Page 39: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/39.jpg)
VERSIÓN 7Separar código en archivos, agregar animaciones
![Page 40: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/40.jpg)
20. Crear popup.css, popup.js
![Page 41: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/41.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/42.jpg)
22. Recargar extensión
![Page 43: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/43.jpg)
VERSIÓN 8Badge para contar ToDos
![Page 44: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/44.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/45.jpg)
23. Modificar popup.js
![Page 46: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/46.jpg)
24. Recargar extensión
![Page 47: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/47.jpg)
VERSIÓN 9Internacionalización (i18n)
![Page 48: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/48.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/49.jpg)
25. Crear _locales/en/messages.json para inglés
![Page 50: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/50.jpg)
26. Crear _locales/es/message.json para español
![Page 51: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/51.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/52.jpg)
27. Modificar manifest.json para usar i18n
![Page 53: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/53.jpg)
28. Modificar popup.html para quitar texto estático
![Page 54: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/54.jpg)
29. Modificar popup.js para llenar información de i18n
![Page 55: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/55.jpg)
31. Cambiar idioma de Chrome para ensayar extensión localizada
![Page 56: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/56.jpg)
32. Recargar extensión
![Page 57: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/57.jpg)
PUBLICAR LA EXTENSIÓNGalería de Chrome
![Page 58: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/58.jpg)
1. Crea un zip de la carpeta de la extensión
![Page 59: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/59.jpg)
2. Entra al dashboard con tu cuenta de Google
![Page 60: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/60.jpg)
3. Crea una nueva extensión y sube el Zip
![Page 61: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/61.jpg)
4. Agrega idioma, descripción, imágenes, videos, etc.
![Page 62: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/62.jpg)
5. ¡Publica tu extensión!
![Page 63: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/63.jpg)
6. Tu extensión se publicará y otros la podrán descargar y usar.
![Page 64: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/64.jpg)
¡YA COMPLETASTE UNA EXTENSIÓN ÚTIL!¿Qué sigue?
![Page 65: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/65.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/66.jpg)
DEPURANDO EXTENSIONESDeveloper Tools de Chrome
![Page 67: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/67.jpg)
Ejecutando inspector en popup
![Page 68: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/68.jpg)
Ejecutando inspector para otras vistas
![Page 69: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/69.jpg)
ElementsInspectar DOM y analizar estilos y eventos
![Page 70: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/70.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/71.jpg)
ScriptsDepurador de JavaScript, con breakpoints y análisis de Stack
![Page 72: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/72.jpg)
StorageMuestra almacenamiento local, incluyendo cookies y localStorage
![Page 73: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/73.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/74.jpg)
¿PREGUNTAS?
![Page 75: Creando Una Extensión de Chrome](https://reader034.vdocuments.pub/reader034/viewer/2022052523/5571f8c849795991698e153c/html5/thumbnails/75.jpg)
Más información