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.
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://extensionsen una pestaña nueva para ir a la página Extensiones. Por diseño, las URLs dechrome://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.
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:
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.
Haz clic en el botón Errores para obtener más información sobre el error:
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:
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. |