CÓMO CREAR UNA EXTENSIÓN DE CHROMEJuliana Peña http://julianapena.com@limitedmage
Día ISC7 abril 2010
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
Conocimientos recomendados
Requerimientos de Software
INTRODUCCIÓN A EXTENSIONES 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
¿Qué no puede hacer?Agregar toolbarsManipular protocolosAgregar items a menúsInyectar JavaScript o CSS a procesos de extensiones
Componentes de una extensión
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
VERSIÓN 0Extensión vacía
1. Extensión vacíamanifest.jsonSiempre debe tener:
NombreVersión
Recomendable tener:DescripciónÍconos
2. Cargar la extensión en Chrome
2. Cargar la extensión en Chrome
VERSIÓN 1Agregar botón al toolbar
3. Agregar imagen 19x19
4. Modificar manifest.json
5. Recargar extensión
VERSIÓN 2Agregar popup al botón
6. Crear popup.html
7. Modificar manifest.json
8. Recargar extensión
VERSIÓN 3Crear librería para manejo de ToDos
9. Copiar jQuery a extensión
10. Crear biblioteca para ToDos, todo.js
11. Modificar popup.html
12. Recargar extensión
VERSIÓN 4Agregar ToDos
13. Modificar popup.html
14. Recargar extensión
VERSIÓN 5Eliminar ToDos
15. Modificar popup.html
16. Recargar extensión
VERSIÓN 6 Guardar datos
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"];
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);
17. Modificar todo.js para cargar lista desde JSON
18. Modificar popup.html para cargar y guardar JSON con localStorage
19. Recargar extensión
VERSIÓN 7Separar código en archivos, agregar animaciones
20. Crear popup.css, popup.js
21. Mover JavaScript de popup.html a popup.js, mover CSS de popup.html a popup.css, modificar para animaciones
22. Recargar extensión
VERSIÓN 8Badge para contar ToDos
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'});
23. Modificar popup.js
24. Recargar extensión
VERSIÓN 9Internacionalización (i18n)
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
25. Crear _locales/en/messages.json para inglés
26. Crear _locales/es/message.json para español
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')
27. Modificar manifest.json para usar i18n
28. Modificar popup.html para quitar texto estático
29. Modificar popup.js para llenar información de i18n
31. Cambiar idioma de Chrome para ensayar extensión localizada
32. Recargar extensión
PUBLICAR LA EXTENSIÓNGalería de Chrome
1. Crea un zip de la carpeta de la extensión
2. Entra al dashboard con tu cuenta de Google
3. Crea una nueva extensión y sube el Zip
4. Agrega idioma, descripción, imágenes, videos, etc.
5. ¡Publica tu extensión!
6. Tu extensión se publicará y otros la podrán descargar y usar.
¡YA COMPLETASTE UNA EXTENSIÓN ÚTIL!¿Qué sigue?
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
DEPURANDO EXTENSIONESDeveloper Tools de Chrome
Ejecutando inspector en popup
Ejecutando inspector para otras vistas
ElementsInspectar DOM y analizar estilos y eventos
ResourcesVer todos los recursos que llama la extensión, incluyendo AJAX, con tiempos de carga y tamaños
ScriptsDepurador de JavaScript, con breakpoints y análisis de Stack
StorageMuestra almacenamiento local, incluyendo cookies y localStorage
ConsoleConsola de JavaScript, para ejecutar código arbitrario
También se puede abrir debajo de cualquier tab con el botón
¿PREGUNTAS?
Más información