Extensión Hello World

Compila tu primera extensión Hello World para aprender los conceptos básicos del desarrollo de extensiones de Chrome.

Descripción general

Crearás un ejemplo de “Hello World”, cargarás la extensión de forma local, localizarás los registros y explorarás otras recomendaciones.

Hello World

Esta extensión mostrará el mensaje "Extensiones de Hello" cuando el usuario haga clic en el ícono de la barra de herramientas de extensiones.

Extensión de Hello
Ventana emergente de la extensión Hello

Para comenzar, crea un directorio nuevo para almacenar tus archivos de extensión. Si lo prefieres, puedes descargar el código fuente completo desde GitHub.

A continuación, crea un archivo nuevo en este directorio llamado manifest.json. En este archivo JSON, se describen las capacidades y la configuración de la extensión. Por ejemplo, la mayoría de los archivos de manifiesto contienen una clave "action" que declara la imagen que Chrome debe usar como el ícono de acción de la extensión y la página HTML que se muestra en una ventana emergente cuando se hace clic en el ícono de acción de la extensión.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

Descarga el ícono en tu directorio y asegúrate de cambiar su nombre para que coincida con el que contiene la clave "default_icon".

Para la ventana emergente, crea un archivo llamado hello.html y agrega el siguiente código:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

La extensión ahora muestra una ventana emergente cuando se hace clic en el ícono de acción de la extensión (ícono de la barra de herramientas). Para probarlo en Chrome, cárgalo de forma local. Asegúrate de guardar todos los archivos.

Carga una extensión sin empaquetar

Para cargar una extensión sin empaquetar en el modo de desarrollador, haz lo siguiente:

  1. Para ir a la página Extensiones, ingresa chrome://extensions en una pestaña nueva. (De forma predeterminada, las URLs de chrome:// no se pueden vincular).
    • También puedes hacer clic en el botón de rompecabezas del menú Extensiones y seleccionar Administrar extensiones en la parte inferior del menú.
    • También puedes hacer clic en el menú de Chrome, colocar el cursor sobre Más herramientas y, luego,seleccionar Extensiones.
  2. Para habilitar el modo de desarrollador, haz clic en el interruptor junto a Modo de desarrollador.
  3. Haga clic en el botón Cargar sin empaquetar y seleccione el directorio de la extensión.
    Página Extensiones
    Página de extensiones (chrome://extensions)

¡Charán! La extensión se instaló correctamente. Si no se incluyeron íconos de extensión en el manifiesto, se creará un ícono genérico para la extensión.

Fija la extensión

De forma predeterminada, cuando cargues tu extensión de forma local, aparecerá en el menú de extensiones (Acertijos). Fija tu extensión a la barra de herramientas para acceder rápidamente a ella durante el desarrollo.

Fija la extensión
Cómo fijar la extensión

Haz clic en el ícono de acción de la extensión (ícono de la barra de herramientas); deberías ver una ventana emergente.

Extensión de Hello World
Extensión Hello World

Vuelve a cargar la extensión

Regresa al código y cambia el nombre de la extensión a "Hello Extensions of the world!" en el manifiesto.

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

Después de guardar el archivo, para ver este cambio en el navegador, también debes actualizar la extensión. Ve a la página Extensiones y haz clic en el ícono de actualización junto al botón de activación on/off:

Vuelve a cargar una extensión

Cuándo volver a cargar la extensión

En la siguiente tabla, se muestran los componentes que se deben volver a cargar para ver los cambios:

Componente de extensión Requiere que se vuelva a cargar la extensión
El manifiesto Sí
Trabajador de servicio Sí
Secuencias de comandos de contenido Sí (más la página de host)
La ventana emergente No
Página de opciones No
Otras páginas HTML de extensiones No

Busca registros y errores de la consola

Registros de la consola

Durante el desarrollo, puedes depurar tu código accediendo a los registros de la consola del navegador. En este caso, buscaremos los registros de la ventana emergente. Para comenzar, agrega una etiqueta de secuencia de comandos a hello.html.

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

Crea un archivo popup.js y agrega el siguiente código:

console.log("This is a popup!")

Para ver este mensaje registrado en la consola, sigue estos pasos:

  1. Abre la ventana emergente.
  2. Haz clic con el botón derecho en la ventana emergente.
  3. Selecciona Inspeccionar.
    Inspeccionando la ventana emergente.
    Inspección de una ventana emergente.
  4. En DevTools, navega al panel Console.
    Panel Code de las Herramientas para desarrolladores
    Inspección de una ventana emergente

Registros de errores

Ahora, rompas la extensión. Para hacerlo, podemos quitar la cita de cierre en popup.js:

console.log("This is a popup!) // ❌ broken code

Ve a la página Extensiones y abre la ventana emergente. Aparecerá el botón Errores.

Página de extensiones con botón de error

Haz clic en el botón Errores para obtener más información sobre el error:

Detalles del error de extensión

Si deseas obtener más información para depurar el service worker, la página de opciones y las secuencias de comandos de contenido, consulta Cómo depurar extensiones.

Estructura un proyecto de extensión

Existen muchas formas de estructurar un proyecto de extensión. Sin embargo, el único requisito previo es colocar el archivo manifest.json en el directorio raíz de la extensión, como se muestra en el siguiente ejemplo:

El contenido de una carpeta de extensiones: manifest.json, background.js, la carpeta de secuencias de comandos, la carpeta emergente y la carpeta de imágenes

Usa TypeScript

Si desarrollas con un editor de código, como VSCode o Atom, puedes usar el paquete de npm chrome-types para aprovechar la función de autocompletado de la API de Chrome. Este paquete de npm se actualiza automáticamente cuando cambia el código fuente de Chromium.

🚀 ¿Todo listo para comenzar a compilar?

Elige cualquiera de los siguientes instructivos para comenzar tu recorrido de aprendizaje sobre extensiones.

Extensión Qué aprenderás
Ejecuta secuencias de comandos en todas las páginas Para insertar un elemento en cada página automáticamente.
Incorpora secuencias de comandos en la pestaña activa Para ejecutar el código en la página actual después de hacer clic en la acción de la extensión.
Administrar pestañas Para crear una ventana emergente que administre las pestañas del navegador.
Controla eventos con service workers Indica cómo un service worker de extensión controla los eventos.