Sebastian Gomez
Empezando a Desarrollar Extensiones para Chrome
Introducción
Hola a todos, bienvenidos a esta nueva serie de posts donde exploraremos el mundo de las extensiones para Chrome. Esta serie será un poco diferente a lo habitual. He notado que muchos de ustedes buscan soluciones para desarrollar extensiones para Chrome, pero no todos tienen los conocimientos básicos necesarios. Algunos de ustedes son expertos en JavaScript, otros en React, pero muchos están perdidos cuando se trata de integrar estos conocimientos en el desarrollo de extensiones para Chrome.
La importancia de una base sólida
El problema principal es que mucha información está dispersa en múltiples canales de YouTube y sitios web. Mi objetivo aquí es consolidar toda esa información y proporcionarles un paquete completo. Mi trabajo como profesor es inspirarlos y guiarlos para que puedan crear algo increíble. No soy un experto, no tengo extensiones publicadas en la Chrome Web Store, pero he aprendido de mis errores y estoy aquí para compartir esos aprendizajes con ustedes.
Documentación y recursos
Antes de comenzar, quiero mostrarles una herramienta clave: la documentación oficial de las extensiones para Chrome. Toda la información que compartiré proviene directamente de ahí. Pueden buscar en Google "Chrome extension docs" para acceder a esta valiosa fuente de información:
https://developer.chrome.com/docs/extensions
Comenzando con Manifest V3
Vamos a empezar con la versión 3 del manifiesto (Manifest V3), que es la vigente. De hecho, desde 2024 Manifest V3 es la única versión que acepta la Chrome Web Store, así que partimos del estándar actual. Asumo que tienen un conocimiento básico de JavaScript y algo de experiencia con extensiones para Chrome. Si ya han leído mis posts sobre React.js, Next.js y JavaScript, este será un buen complemento.
Estructura de la serie
Estos posts serán largos y detallados. Les recomiendo que sigan cada paso conmigo, ya sea teniendo mi post en una pantalla secundaria mientras practican en la principal. La clave para aprender es hacer, no solo ver.
Primer proyecto: extensión para Chrome con React.js
En el próximo post comenzaremos a desarrollar una extensión para Chrome usando React.js. Empezaremos desde lo más básico, así que si son principiantes, no se preocupen. Cubriremos todo lo necesario para que puedan seguir adelante.
Consejos para el éxito
Participación activa: No solo lean los posts, sigan los pasos activamente.
Persistencia: El desarrollo de extensiones puede ser complicado, pero con esfuerzo y práctica obtendrán resultados satisfactorios.
Uso de recursos: Utilicen la documentación oficial de Chrome como su principal recurso de referencia.
Espero que disfruten esta serie tanto como yo disfruté prepararla. Compartan el post con sus amigos y familiares, y no olviden dejar comentarios y darle like a los posts. Esta es una oportunidad para aprender y crecer en el desarrollo de extensiones para Chrome. ¡Vamos a empezar!
Primer paso: configuración inicial
En este primer post configuraremos nuestro entorno de desarrollo y crearemos la estructura básica de nuestra extensión para Chrome usando React.js.
Instalar Node.js y npm: Asegúrense de tener Node.js y npm instalados en su máquina. Pueden descargarlos desde nodejs.org.
Crear un nuevo proyecto con Vite: Históricamente esta serie usaba Create React App, pero el equipo de React lo descontinuó en febrero de 2025, así que ahora arrancamos con Vite, que es la herramienta recomendada hoy para proyectos de React. Ejecuten estos comandos:
npm create vite@latest my-chrome-extension -- --template react
cd my-chrome-extension
npm installRevisar el package.json: Por ahora no tienen que cambiar nada especial aquí. Lo importante es saber que el comando de compilación que usaremos más adelante (npm run build) ya viene definido en los scripts que Vite generó por nosotros. En los próximos capítulos sí ajustaremos esta configuración para adaptarla a una extensión.
Crear el archivo del manifiesto: En la raíz del proyecto, creen un archivo manifest.json con la siguiente estructura básica:
{
"manifest_version": 3,
"name": "Mi Extensión de Chrome",
"version": "1.0",
"action": {
"default_popup": "index.html",
"default_icon": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png"
}
},
"permissions": [
"activeTab"
]
}Este manifiesto mínimo sigue siendo perfectamente válido: manifest_version: 3 es lo que exige Chrome hoy, y action.default_popup, default_icon y permissions: ["activeTab"] son la base que necesitamos para empezar.
Añadir iconos: Coloquen los iconos requeridos en la carpeta public, junto al manifest.json. Así Vite los copiará a la salida de compilación.
Construir y cargar la extensión: Primero compilen el proyecto:
npm run buildLuego carguen la extensión en Chrome:
- Ir a
chrome://extensions/ - Activar el "Modo de Desarrollador"
- Hacer clic en "Cargar extensión descomprimida"
- Seleccionar la carpeta
distde su proyecto
Nota: Con Vite la salida de compilación vive en dist, no en build. Si vienen de un tutorial basado en Create React App, ese es el cambio de carpeta a tener en cuenta.
Verán que la extensión carga en una ventana muy pequeña al hacerle clic, y verán que en su interior corre la aplicación de React. Les recomiendo cambiar los estilos del body en el index.css añadiéndole un ancho y un alto de 400px:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 400px;
height: 400px;
}De esta manera podrán ver una buena ventana del tamaño recomendable para empezar a trabajar con su extensión. Así habrán creado una extensión básica que en su interior ejecuta una aplicación de React.js.
Próximos pasos
Gracias por unirse a esta serie. Estoy emocionado por lo que vamos a crear juntos. Nos vemos en el próximo post. ¡Buena suerte y a programar!
Sebastian Gomez
Creador de contenido principalmente acerca de tecnología.