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

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