Sebastian Gomez
Cómo Crear y Depurar Pop ups en Extensiones para Chrome
Jul 19, 2024
Updated: Jun 24, 2026

Cómo Crear y Depurar Pop ups en Extensiones para Chrome

Introducción

En este post te enseñaré a crear y depurar pop ups en extensiones para Chrome. Exploraremos cómo configurar un archivo popup.html, agregar hojas de estilo y scripts, y depurar posibles errores. Esta guía paso a paso te ayudará a desarrollar pop ups funcionales y atractivos para tus extensiones.

El popup es, en la mayoría de los casos, el punto de entrada de la aplicación y corresponde muchas veces a una ventana emergente justo debajo del icono de tu extensión. Tú puedes definir el nombre del archivo y su ubicación, pero debe estar claramente especificado en el manifiesto mediante:

{
  "action": {
    "default_popup": "popup.html" // o index.html o hola.html
  }
}

Vigente en 2026: Este post usa Manifest V3 ("manifest_version": 3) con la clave action.default_popup, que es el enfoque correcto y no obsoleto. Chrome retiró por completo Manifest V2 en 2024, así que MV3 es exactamente lo que debes usar hoy.

Creando el Archivo popup.html

Para empezar, necesitamos crear el archivo popup.html, que será el contenido del pop up de nuestra extensión.

Crear el Archivo popup.html: crea un archivo llamado popup.html en tu proyecto y añade el siguiente código básico de HTML. Fíjate en que tanto la hoja de estilos de Bootstrap como su JavaScript se cargan desde rutas relativas, es decir, desde archivos que viviran dentro del propio paquete de la extensión:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Inicio de Sesión</title>
    <!-- Bootstrap 5 empaquetado localmente dentro de la extensión -->
    <link href="vendor/bootstrap.min.css" rel="stylesheet">
    <link href="popup.css" rel="stylesheet">
</head>
<body>
    <div class="login-container">
        <h2>¡Bienvenido de Nuevo!</h2>
        <form>
            <div class="mb-3">
                <label for="email" class="form-label">Correo Electrónico</label>
                <input type="email" class="form-control" id="email" placeholder="Ingrese su correo electrónico">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Contraseña</label>
                <input type="password" class="form-control" id="password" placeholder="Ingrese su contraseña">
            </div>
            <div class="d-grid">
                <button type="submit" class="btn btn-custom">Iniciar Sesión</button>
            </div>
        </form>
        <p class="mt-3">¿No tienes una cuenta? <a href="#" style="color: #ff6f61;">Regístrate</a></p>
    </div>

    <!-- Bootstrap 5 ya incluye Popper en su bundle; jQuery no es necesario -->
    <script src="vendor/bootstrap.bundle.min.js"></script>
    <script src="popup.js"></script>
</body>
</html>

¿Por qué archivos locales y no un CDN? Más adelante veremos que la política de seguridad de contenido (CSP) por defecto de Manifest V3 solo permite ejecutar scripts del propio origen de la extensión (script-src 'self'). Esto significa que un <script src="https://..."> apuntando a un CDN remoto sería bloqueado en runtime y, sencillamente, no se ejecutaria. Por eso descargamos Bootstrap y lo guardamos dentro de la extensión, por ejemplo en una carpeta vendor/, y lo referenciamos con rutas relativas.

Para conseguir esos archivos, descarga Bootstrap 5.3.x desde su sitio oficial o desde npm y copia bootstrap.min.css y bootstrap.bundle.min.js a tu carpeta vendor/. Si prefieres npm:

npm install bootstrap@5.3.8

Nota historica: las versiones antiguas de este tutorial usaban Bootstrap 4 desde StackPath BootstrapCDN, que ya fue dado de baja, ademas de jQuery y Popper sueltos, un patron obsoleto en Bootstrap 5. Hoy se instala desde npm (paquete bootstrap, archivos compilados en node_modules/bootstrap/dist/).

Actualizar el Manifiesto: modifica el archivo manifest.json para incluir el pop up:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    }
  }
}

Verificar los Cambios: recarga la extensión en Chrome y verifica que el pop up aparezca correctamente al hacer clic en el icono de la extensión.

Añadiendo Estilos y Scripts

Para mejorar el diseño y la funcionalidad de tu pop up, puedes agregar hojas de estilo CSS y scripts JavaScript propios, siempre dentro del paquete de la extensión.

Crear una Hoja de Estilo: crea un archivo llamado popup.css en tu proyecto y añade el siguiente código CSS:

body {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    width: 400px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    margin: 0;
}
.login-container {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 400px;
}
.login-container h2 {
    color: #ff6f61;
    margin-bottom: 1rem;
}
.btn-custom {
    background: #ff6f61;
    border: none;
    color: white;
    transition: background 0.3s;
}
.btn-custom:hover {
    background: #ff8f81;
}
.form-label {
    float: left;
}

Asegúrate de que el popup.html enlace correctamente con esta hoja de estilo (ya lo incluimos en el <head> del ejemplo anterior):

<link href="popup.css" rel="stylesheet">

Añadir un Script: crea un archivo llamado popup.js y añade el siguiente código JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    alert("De esta manera hemos deshabilitado React por completo y usamos un popup estándar de extensión de Chrome solo con HTML, CSS y JavaScript");
});

Recuerda que ya incluimos este script en el popup.html:

<script src="popup.js"></script>

Recargar y Probar: recarga la extensión y verifica que los estilos y scripts se apliquen correctamente.

Depuración de la extensión

Los errores de la extensión se pueden ver de varias maneras. En primer lugar, los errores no críticos se ven al oprimir el botón "Errores" de la tarjeta de la extensión en la lista de chrome://extensions:

Nota del autor: aqui va una captura del boton "Errores" en chrome://extensions (pendiente de recapturar contra la interfaz actual de Chrome).

En segundo lugar están los errores críticos. Estos ni siquiera permiten que la extensión se ejecute y, principalmente, obedecen a errores en el manifest.json:

Nota del autor: aqui va una captura de un error critico de manifest.json (pendiente de recapturar contra la interfaz actual de Chrome).

La tercera forma es depurar el popup como si fuera una aplicación web normal, mediante "Inspeccionar elemento".

Depurar el Popup

Recuerda que el popup no es más que una aplicación independiente, aislada y autocontenida dentro del contenedor de la aplicación, lo cual hace que depurar pop ups sea crucial para asegurar que tu extensión funcione correctamente. Aquí tienes algunos pasos para ayudarte a identificar y corregir errores.

Verificar Errores en Chrome: después de recargar tu extensión, abre el pop up y haz clic derecho para seleccionar "Inspeccionar", como si fuera un sitio web. Esto abrirá las herramientas de desarrollador de Chrome.

Revisar la Consola: la consola te mostrará cualquier error en tu código. Puedes buscar estos errores en Google para encontrar soluciones.

Depuración en Profundidad: utiliza las pestañas "Sources" y "Network" en las herramientas de desarrollador para identificar problemas con los scripts y las solicitudes de red.

Nota: No es buena práctica cargar en tu extensión archivos JavaScript o CSS externos, ya que esto introduce problemas de seguridad y, en general, se considera una mala práctica no aceptada al desarrollar extensiones de Chrome. Por eso, en el ejemplo de este post empaquetamos Bootstrap dentro de la propia extensión y lo cargamos con rutas relativas, en lugar de traerlo desde un CDN. Puedes explorar la opción content_security_policy del manifiesto y añadir excepciones, pero en general no se recomienda.

La política de seguridad de contenido (CSP) es una característica de seguridad esencial para las extensiones de Chrome que ayuda a prevenir diversos tipos de ataques, como el Cross Site Scripting (XSS) y la inyección de datos. En el contexto de las extensiones de Chrome, la configuración de CSP se define en el archivo manifest.json, bajo la clave content_security_policy.

Definición de CSP para Páginas de Extensión

En las extensiones de Chrome, la política de seguridad de contenido para las páginas de la extensión se puede especificar de la siguiente manera:

{
  "manifest_version": 3,
  "name": "Mi Extensión Segura",
  "version": "1.0",
  "content_security_policy": {
    "extension_pages": "default-src 'self'; script-src 'self' https://apis.google.com"
  }
}

Vigente en 2026: Esta sintaxis es la correcta para Manifest V3. En Manifest V2 la clave content_security_policy era una cadena plana, mientras que en MV3 es un objeto con claves como extension_pages. Sigue siendo el enfoque actual.

Componentes de la Política

  • `default-src 'self'`: establece que todos los recursos, por defecto, solo pueden cargarse desde el mismo origen que la extensión, es decir, desde el propio paquete de la extensión. Esto es justamente lo que nos obligó a empaquetar Bootstrap localmente.
  • `script-src 'self' https://apis.google.com`: permite la carga de scripts únicamente desde el mismo origen y desde el dominio apis.google.com. Esta configuración es útil si tu extensión necesita interactuar con servicios de Google.

Importancia de CSP en Extensiones

Configurar correctamente la política de seguridad de contenido es crucial para proteger tu extensión y a sus usuarios. Al restringir las fuentes desde las cuales se pueden cargar recursos, se minimizan las posibilidades de ataques de inyección de código y otras amenazas de seguridad.

Conclusión

Crear y depurar pop ups en extensiones para Chrome puede parecer complejo al principio, pero siguiendo estos pasos podrás desarrollar pop ups funcionales y atractivos. Desde la configuración básica del archivo popup.html hasta la integración de Bootstrap 5 empaquetado localmente y la depuración de errores, esta guía te proporciona las herramientas necesarias para mejorar tus extensiones de Chrome.

Ejercicios propuestos

  1. Crea una extensión básica con Manifest V3 y un popup.html que muestre un formulario sencillo, usando Bootstrap 5 descargado dentro de la carpeta vendor/ de la extensión.
  2. Añade un popup.js que reaccione al envío del formulario (por ejemplo, mostrando un mensaje en la consola) y depuralo abriendo las herramientas de desarrollador sobre el pop up.
  3. Define una content_security_policy con extension_pages y comprueba qué ocurre si intentas cargar un script desde un CDN remoto: observa cómo la CSP lo bloquea en la consola.

Resumen en 3 puntos

  1. El popup es el punto de entrada de muchas extensiones; se declara con action.default_popup en el manifest.json usando Manifest V3.
  2. Empaqueta tus estilos y scripts (incluido Bootstrap 5) dentro de la extensión y referencialos con rutas relativas, porque la CSP por defecto de MV3 bloquea los recursos remotos.
  3. Depura el pop up con las herramientas de desarrollador de Chrome y revisa los errores no críticos y críticos desde chrome://extensions.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente.

Déjame un comentario si te sirvió, si quieres añadir alguna opinión o si tienes alguna duda. Y recuerda que si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo. ¡Sigue practicando y mejorando tus habilidades para crear extensiones aún más útiles y sofisticadas!

Sebastian Gomez

Sebastian Gomez

Creador de contenido principalmente acerca de tecnología.

Leave a Reply

0 Comments

Advertisements

Related Posts

Categorias