Estas son las charlas ganadoras del Platzi Barcamp
David Flores - Crea tu primera extension para Google Chrome
Clase 6 de 20 • Platzi Barcamp 2024
Contenido del curso
Charlas finalistas del Platzi Barcamp
- 3
Adriana Razo De León - Nanoestructuras: Soluciones Pequeñas para Grandes Problemas
02:45 - 4
Anghelo Alexander Pintado Valverde - ¿Cómo recuperar 17 años de tu vida?
02:45 - 5
Arvin Villalobos - Fricción y movimiento: la física que mueve tu mundo
02:24 - 6
David Flores - Crea tu primera extension para Google Chrome
02:31 - 7
Diego Martinez Lucioni - Programas de Google: Un mundo de oportunidades
02:54 - 8
Emerson Cedeño Salazar - Y si a nuestra ansiedad le hablamos en otros idiomas?
03:01 - 9
Gera Meraki - Convierte tu conocimiento en contenido: de cero a 400k seguidores
02:43 - 10
Henny Patricia Peña Murcia - LAS VENTAS: una obra de teatro en 3 actos
02:56 - 11
Jorge Gabriel Llerena Huanca - Aulas STEAM
02:59 - 12
José Armando Herrera - Impulsando la creatividad en las organizaciones
03:10 - 13
Juan J Cardona - Eficiencia al límite: 3 semanas de backlog resueltas en 1 día
02:52 - 14
Lilián Zamora - El poder del chismecito en las big tech
03:00 - 15
Juan José Rueda Mosquera - Cómo hackearse el cerebro para crear contraseñas infinitas
02:50 - 16
Luis Arturo Cruz Cruz - Nostalgia del formato físico: ¿Cómo grabar audio y video sin software?
02:59 - 17
Mariajosé Juanta López - Semilla con ADN de árbol
02:40 - 18
Miguel Ángel Cabaleiro Tenorio - Trucos para generar imágenes en Midjourney
02:18 - 19
Santiago Ramírez Castaño - Timi y sus aventuras por el oceáno infinito de internet
03:01 - 20
Sol Guadalupe Garay Pacheco - Electro IA
02:42
Resumen
La creación de extensiones para Google Chrome abre un mundo de posibilidades para personalizar y mejorar nuestra experiencia de navegación. Aunque tradicionalmente se construyen con JavaScript, HTML y CSS básico, existe un enfoque más avanzado que permite desarrollar extensiones más potentes y sofisticadas utilizando stacks modernos de desarrollo.
¿Cómo funciona la comunicación entre contextos en una extensión de Chrome?
La arquitectura de una extensión de Chrome involucra múltiples contextos que operan de manera independiente:
- Contexto de la página web
- Contexto de la extensión
- Contexto del content
- Contexto del background
Para establecer comunicación entre estos contextos aislados, Chrome proporciona la función sendMessage, similar a una operadora telefónica que conecta diferentes líneas para permitir el intercambio de información.
¿Qué herramientas necesitas para crear una extensión moderna?
El desarrollo moderno de extensiones requiere un stack más robusto que incluye:
- React para la interfaz de usuario
- Vite como bundler
- TypeScript para tipo seguro
- Gestión automatizada de contextos
¿Cuál es el proceso de desarrollo e instalación?
El proceso se divide en tres etapas principales:
-
Desarrollo del código fuente:
- Implementación del popup
- Programación de la lógica de comunicación
- Desarrollo de las funcionalidades específicas
-
Construcción del proyecto:
- Ejecutar npm run build
- Generación de la carpeta Chrome Extension
- Empaquetado de todos los recursos necesarios
-
Instalación en Chrome:
- Acceder a la sección de extensiones
- Activar modo desarrollador
- Seleccionar "Load Unpack"
- Elegir la carpeta generada en el build
La creación de extensiones para Chrome representa una herramienta poderosa para resolver problemas específicos y mejorar la experiencia de navegación. Con las herramientas y conocimientos adecuados, cualquier desarrollador puede crear extensiones sofisticadas que aprovechen tecnologías modernas.