CMO CREAR UNA EXTENSIN DE CHROME

Angel Kurten @CSCOlombian 7 abril 2012

Objetivos
Conocer qu puede o no hacer una extensin y qu constituye a una extensin Usar JavaScript, HTML y CSS para crear una extensin de Chrome de una To Do List Ejecutar extensiones en Chrome Publicar extensiones en la galera de Google Usar el inspector y depurador de Chrome

Conocimientos recomendados

Requerimientos de Software

INTRODUCCIN A EXTENSIONES DE CHROME

Qu puede hacer una extensin?

Inyectar JavaScript y CSS a pginas (ala GreaseMonkey) Agregar botones con popups al toolbar del navegador Acceder a bookmarks, tabs, y ventanas Hacer peticiones de Ajax en otros dominios Cambiar pgina de inicio (chrome://newtab) Comunicacin dentro y entre extensiones Alternativamente, una extensin puede ser un tema Tener una extensin en mtliples idiomas para localizacin Usar NPAPI para usar plugins dentro de extensiones

Qu no puede hacer?
Agregar toolbars Manipular protocolos Agregar items a mens Inyectar JavaScript o CSS a procesos de extensiones

Componentes de una extensin

Temas a cubrir
1. manifest.json para declarar extensiones 2. Cargar extensin no empaquetada en Chrome 3. Agregar un botn (browser action) a Chrome 4. Cargar un popup HTML en el botn 5. Usar JavaScript y CSS para darle interactividad y diseo al popup 6. Usar objecto localStorage para guardar datos 7. Usar el API chrome.browserAction para agregar un badge sobre el botn 8. Usar i18n para desarrollar una extensin multilinge 9. Publicar extensiones en la galera oficial 10.Usar los devtools para inspeccionar y depurar extensiones

VERSIN 0
Extensin vaca

1. Extensin vaca
manifest.json Siempre debe tener: Nombre Versin Recomendable tener: Descripcin conos

2. Cargar la extensin en Chrome

2. Cargar la extensin en Chrome

VERSIN 1
Agregar botn al toolbar

3. Agregar imagen 19x19

4. Modificar manifest.json

5. Recargar extensin

VERSIN 2
Agregar popup al botn

6. Crear popup.html

7. Modificar manifest.json

8. Recargar extensin

VERSIN 3
Crear librera para manejo de ToDos

9. Copiar jQuery a extensin

10. Crear biblioteca para ToDos, todo.js

11. Modificar popup.html

12. Recargar extensin

VERSIN 4
Agregar ToDos

13. Modificar popup.html

14. Recargar extensin

VERSIN 5
Eliminar ToDos

15. Modificar popup.html

16. Recargar extensin

VERSIN 6
Guardar datos

localStorage
Objecto de JavaScript en HTML5 que permite que sitios web y extensiones almacenen datos en disco local Llave y valor deben ser strings Parecido a cookies

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

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

Guardar objetos en localStorage

Objetos y arreglos no se pueden guardar directamente, deben convertirse a strings Se puede usar formato JSON Chrome provee mtodos para usar JSON fcilmente

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 extensin

VERSIN 7
Separar cdigo 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 extensin

VERSIN 8
Badge para contar ToDos

Badges en Browser Action

Mostrar un texto corto (hasta 4 caracteres) encima del cono Excelente para mostrar mensajes no ledos 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 extensin

VERSIN 9
Internacionalizacin (i18n)

Configuracin de localizacin
Para localizacin, 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 informacin de mensajes Locales 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 ingls

26. Crear _locales/es/message.json para espaol

Acceder a mensajes
Desde 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 esttico

29. Modificar popup.js para llenar informacin de i18n

31. Cambiar idioma de Chrome para ensayar extensin localizada

32. Recargar extensin

PUBLICAR LA EXTENSIN
Galera de Chrome

1. Crea un zip de la carpeta de la extensin

2. Entra al dashboard con tu cuenta de Google

3. Crea una nueva extensin y sube el Zip

4. Agrega idioma, descripcin, imgenes, videos, etc.

5. Publica tu extensin!

6. Tu extensin se publicar y otros la podrn descargar y usar.

YA COMPLETASTE UNA EXTENSIN TIL!

Qu sigue?

Retos para mejorar la extensin

Implementar fechas lmite con recordatorios
o o

Usar pgina de fondo para tomar tiempos Mostrar recordatorios usando window.webkitNotifications

Agregar ToDos a partir de texto seleccionado en pgina

o

Usar un content script para comunicarse con pgina y recuperar el texto seleccionado

Usar Ajax para guardar informacin en servidor

o

Sincronizar diferentes instancias de la extensin de un usuario

DEPURANDO EXTENSIONES
Developer Tools de Chrome

Ejecutando inspector en popup

Ejecutando inspector para otras vistas

Elements
Inspectar DOM y analizar estilos y eventos

Resources
Ver todos los recursos que llama la extensin, incluyendo AJAX, con tiempos de carga y tamaos

Scripts
Depurador de JavaScript, con breakpoints y anlisis de Stack

Storage
Muestra almacenamiento local, incluyendo cookies y localStorage

Console
Consola de JavaScript, para ejecutar cdigo arbitrario Tambin se puede abrir debajo de cualquier tab con el botn

PREGUNTAS?

Ms informacin