Como crear tu propia extensión para Google Chrome

Descubre todo lo que necesitas para crear tu primera extensión para el navegador Google Chrome.

Las extensiones de Google Chrome son pequeñas aplicaciones que amplían la funcionalidad del navegador web. Permiten personalizar la experiencia del usuario, automatizar tareas, o integrar servicios externos directamente en el navegador.

Cómo crear una extensión

Para crear una extensión básica en Google Chrome, necesitas algunos archivos esenciales:

1. Archivo manifest

Crea un archivo llamado manifest.json. Este archivo es obligatorio y define los metadatos de la extensión como el nombre, la versión otros atributos configurables. Un ejemplo básico podría ser:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "1.0",
  "description": "Una extensión simple de ejemplo",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

2. Icono

El icono representa visualmente la extensión en la barra de herramientas de Chrome. Puede ser un archivo PNG de 16x16, 48x48 y 128x128 píxeles. Llámalo icon.png tal y como lo hemos definido en el manifest.json.

3. Archivo HTML

Crea un archivo llamado popup.html. Este archivo contiene la interfaz de usuario básica de la extensión.

<!DOCTYPE html>
<html>
  <head>
    <title>Mi Extensión</title>
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>
    <script src="popup.js"></script>
  </body>
</html>

Cargar la extensión en Chrome

Para cargar tu extensión en Chrome sigue estos pasos:

En el navegador, en la barra de direcciones escribe chrome://extensions/.
Activa el modo desarrollador (esquina superior derecha).
Haz clic en “Cargar extensión descomprimida” y selecciona el directorio donde guardaste los archivos.

Extensión instalada

Una vez cargada, verás el ícono de tu extensión en la barra de herramientas de Chrome. Haz clic en él para abrir el popup definido en tu archivo HTML.

Probar y depurar la extensión

Para probar la extensión

Inserta código JavaScript en popup.js, por ejemplo, console.log('Extensión cargada correctamente');.
Usa las herramientas de desarrollador (clic derecho -> “Inspeccionar” sobre el HTML de la extensión) para ver la consola y los registros.
Si hay errores en el script, se mostrarán en la página de extensiones (chrome://extensions/).

Logs de error

Si ocurre algún error en tu script, aparecerá en la página de extensiones, donde puedes revisar los detalles del problema.

Estructura de archivos de la extensión

mi-extension/
├── manifest.json
├── icon.png
├── popup.html
└── popup.js

Conclusión

Con estos archivos y pasos básicos, ya tienes una extensión funcional en Google Chrome. ¡Experimenta y añade más funcionalidades según tus necesidades!