Configuración del entorno de desarrollo

Antes de construir, configura tu espacio de trabajo: preparar las herramientas primero hace que la programación sea más fluida y te permite probar tus extensiones de manera eficiente.

Tu navegador es tu laboratorio. Chrome y Edge tienen funciones de desarrollo integradas; el primer paso es activar su "Modo de desarrollador" especial.

Activa el Modo de desarrollador: abre chrome://extensions y activa el interruptor en la esquina superior derecha. Eso permite cargar y probar tus propias extensiones.

Cada extensión necesita su propia carpeta para todos sus archivos. Crea una vacía —digamos mi-primera-extension— donde colocaremos el manifiesto y el código.

El archivo manifest.json es el plano de tu extensión; le indica al navegador los detalles clave. Comienza con uno mínimo en tu carpeta.

Cualquier editor sirve, pero un verdadero editor de código añade resaltado, autocompletado y depuración. VS Code es la opción gratuita y popular; descárgalo si lo necesitas.

Con el Modo de desarrollador activado, haz clic en Cargar descomprimida y selecciona tu carpeta. Tu extensión debería aparecer en la lista, tal vez con un icono en la barra de herramientas.

Después de editar los archivos, el navegador no verá los cambios hasta que los recargues; haz clic en el icono de actualizar en la tarjeta de tu extensión en chrome://extensions.

Depura extensiones con DevTools, igual que las páginas web. Cada tarjeta enlaza con su "service worker" en segundo plano o con el inspector emergente para profundizar.

Has aprendido los pasos esenciales para preparar tu navegador y cargar tu primera extensión. ¡Pongamos a prueba tus conocimientos!

¿Cuál de las siguientes acciones es necesaria para ver los cambios en tu extensión después de modificar sus archivos?

Tu entorno está listo: el Modo Desarrollador activado, una carpeta con manifest.json, carga y recarga de extensiones descomprimidas, y las Herramientas de desarrollo para la depuración. ¡Adelante!