CÓMO CREAR UNA EXTENSIÓN DE CHROME

Juliana Peña http://julianapena.com @limitedmage Día ISC 7 abril 2010

Objetivos
Conocer qué puede o no hacer una extensión y qué constituye a una extensión Usar JavaScript, HTML y CSS para crear una extensión de Chrome de una «To Do List» Ejecutar extensiones en Chrome Publicar extensiones en la galería de Google Usar 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 navegador Acceder a bookmarks, tabs, y ventanas Hacer peticiones de Ajax en otros dominios Cambiar página de inicio (chrome://newtab) Comunicación dentro y entre extensiones Alternativamente, una extensión puede ser un tema Tener una extensión en mútliples idiomas para localización Usar NPAPI para usar plugins dentro de extensiones

¿Qué no puede hacer?
Agregar toolbars Manipular protocolos Agregar items a menús Inyectar JavaScript o CSS a procesos de extensiones

Componentes de una extensión

Temas a cubrir
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. manifest.json para declarar extensiones Cargar extensión no empaquetada en Chrome Agregar un botón (browser action) a Chrome Cargar un popup HTML en el botón Usar JavaScript y CSS para darle interactividad y diseño al popup Usar objecto localStorage para guardar datos Usar el API chrome.browserAction para agregar un badge sobre el botón Usar i18n para desarrollar una extensión multilingüe Publicar extensiones en la galería oficial Usar los devtools para inspeccionar y depurar extensiones

VERSIÓN 0
Extensión vacía

1. Extensión vacía
manifest.json Siempre debe tener: Nombre Versión Recomendable tener: Descripción Íconos

2. Cargar la extensión en Chrome

2. Cargar la extensión en Chrome

VERSIÓN 1
Agregar botón al toolbar

3. Agregar imagen 19x19

4. Modificar manifest.json

5. Recargar extensión

VERSIÓN 2
Agregar popup al botón

6. Crear popup.html

7. Modificar manifest.json

8. Recargar extensión

VERSIÓN 3
Crear 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 4
Agregar ToDos

13. Modificar popup.html

14. Recargar extensión

VERSIÓN 5
Eliminar ToDos

15. Modificar popup.html

16. Recargar extensión

VERSIÓN 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 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 7
Separar 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 8
Badge para contar ToDos

Badges en Browser Action
Mostrar un texto corto (hasta 4 caracteres) encima del ícono Excelente 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 9
Internacionalización (i18n)

Configuración de localización
Para 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 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 inglés

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

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 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ÓN
Galerí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ón
Implementar fechas límite con recordatorios
Usar página de fondo para tomar tiempos Mostrar recordatorios usando window.webkitNotifications

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

Usar Ajax para guardar información en servidor
Sincronizar diferentes instancias de la extensión 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 extensión, incluyendo AJAX, con tiempos de carga y tamaños

Scripts
Depurador de JavaScript, con breakpoints y análisis de Stack

Storage
Muestra almacenamiento local, incluyendo cookies y localStorage

Console
Consola 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

Sign up to vote on this title
UsefulNot useful