Se usó la API de Cloud Translation para traducir esta página.

Extensión Hello World

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

Descripción general

Crearás un mensaje "Hello World" Por ejemplo, carga la extensión de forma local, ubica los registros y explora otras recomendaciones.

Hello World

Esta extensión mostrará “Hello Extensions” cuando el usuario haga clic en el ícono de la barra de herramientas de extensiones.

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

Para comenzar, crea un directorio nuevo para almacenar los archivos de tu extensión. Si lo prefieres, puedes descargar la versión completa código fuente de GitHub.

A continuación, crea un archivo nuevo en este directorio llamado manifest.json. En este archivo JSON, se describen los atributos capacidades y configuración. Por ejemplo, la mayoría de los archivos de manifiesto contienen una clave "action" que declara la imagen que Chrome debe usar como ícono de acción de la extensión y la página HTML para mostrar en una ventana emergente cuando 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 contenido de 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). Puedes probar y cargarla en Chrome de forma local. Asegúrate de que se guarden todos los archivos.

Carga una extensión sin empaquetar

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

Ingresa chrome://extensions en una pestaña nueva para ir a la página Extensiones. Por diseño, las URLs de chrome:// no se pueden vincular.
- Como alternativa, haz clic en el botón de rompecabezas del menú Extensiones y selecciona Administrar extensiones en la parte inferior del menú.
- O bien, haz clic en el menú de Chrome, coloca el cursor sobre Más herramientas y, luego, selecciona Extensiones.
Para habilitar el modo de desarrollador, haz clic en el interruptor junto a Modo de desarrollador.
Haz clic en el botón Load unpack y selecciona el directorio de la extensión.

Página Extensiones (chrome://extensions)
.

¡Charán! La extensión se instaló correctamente. Si no se incluyeron iconos 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 (). Fija tu extensión a la barra de herramientas para acceder rápidamente durante el desarrollo.

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. Ir a la página Extensiones y haz clic en el ícono de actualizar junto al botón de activación Activar/Desactivar:

Volver a cargar una extensión

Cuándo volver a cargar la extensión

En la siguiente tabla, se muestra qué componentes deben volver a cargarse para ver los cambios:

Componente de la extensión	Requiere volver a cargar la extensión
El manifiesto	Sí
Un service worker	Sí
Guiones de contenido	Sí (además de la página de alojamiento)
Ventana emergente	No
Página de opciones	No
Otras páginas HTML de la extensión	No

Cómo buscar registros y errores de la consola

Registros de la consola

Durante el desarrollo, puedes depurar el código accediendo a los registros de la consola del navegador. En este caso, 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:

Abre la ventana emergente.
Haz clic con el botón derecho en la ventana emergente.
Selecciona Inspeccionar.

Inspeccionar una ventana emergente
En DevTools, navega al panel Consola.

Inspecciona una ventana emergente
.

Registros de errores

Ahora, desglosemos la extensión. Para hacerlo, podemos quitar la comilla 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 el 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

Para obtener más información sobre cómo depurar el service worker, la página de opciones y las secuencias de comandos de contenido, consulta Depuración. extensiones.

Estructura un proyecto de extensión

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

El contenido de una carpeta de la extensión: manifest.json, background.js, carpeta de secuencias de comandos, carpeta emergente y carpeta images.

Cómo usar TypeScript

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

🚀 ¿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
Ejecute secuencias de comandos en cada página	Para insertar un elemento en todas las páginas automáticamente.
Cómo insertar secuencias de comandos en la pestaña activa	Para ejecutar código en la página actual después de hacer clic en la acción de extensión.
Administra pestañas	Crear una ventana emergente que administre las pestañas del navegador
Controla eventos con service workers	Cómo maneja los eventos un service worker de extensión.