Desarrolla tu primera extensión de Chrome en 5 minutos
Google Chrome es uno de los navegadores más utilizados en el mundo, y una de sus mayores fortalezas es la posibilidad de personalizarlo mediante extensiones. Estas pequeñas aplicaciones permiten agregar nuevas funcionalidades, mejorar la productividad y optimizar la experiencia de navegación.
¿Te gustaría crear tu propia extensión sin necesidad de ser un experto en programación? En este tutorial, te guiaremos paso a paso para desarrollar una extensión de Chrome sencilla en escasos minutos. Aprenderás a estructurar el proyecto, escribir el código necesario y probarlo en tu navegador.
¿Qué es una extensión de Chrome?
Las extensiones o plugins de Chrome son pequeños programas que amplían la funcionalidad del navegador, permitiendo a los usuarios personalizar su experiencia según sus necesidades específicas. Desde mejorar la productividad hasta agregar nuevas funciones de accesibilidad, las extensiones desempeñan un papel clave en la navegación web moderna.
A día de hoy, es extraño que nadie use extensiones en su navegador. Por ejemplo, una de las más famosas es AdBlock (y sus alternativas), que nos permite librarnos del abuso de publicidad en la web.
Además, si creas extensiones de calidad, puedes llegar a monetizarlas, convirtiéndose en una fuente de ingresos pasivos.
Requisitos previos: Lo que necesitas antes de empezar
Para desarrollar tu primera extensión, necesitas contar con algunas herramientas básicas:
- Un editor de código. Nosotros recomendamos Visual Studio Code.
- El navegador Google Chrome para probar la extensión.
No necesitas nada más.
También es útil conocer los conceptos fundamentales de HTML, CSS y JavaScript, ya que la extensión utilizará estas tecnologías para su interfaz y funcionalidades.
Finalmente, es importante organizar bien la estructura del proyecto desde el inicio, creando una carpeta dedicada donde almacenar todos los archivos necesarios.
Creando la estructura básica de la extensión
Vamos a desarrollar una extensión muy simple que nos liste los encabezados de una página. Aunque simple, es un buen ejemplo para ver como podemos acceder al DOM desde una extensión.
Cada extensión de Chrome requiere ciertos archivos esenciales para funcionar correctamente:
manifest.json: Define los permisos, metadatos y configuraciones de la extensión.popup.html: La interfaz que se mostrará cuando el usuario haga clic en el icono de la extensión.background.js: Un script en segundo plano que ejecuta funciones sin interferir con la interfaz del usuario.
Para empezar, es necesario crear el archivo manifest.json, donde se especifica la versión, el nombre de la extensión, los permisos y otros detalles importantes. Aquí tienes más detalladamente el formato del archivo de manifiesto.
{
"manifest_version": 3,
"name": "Headings Extractor",
"version": "1.0",
"description": "Extrae los encabezados de la página actual",
"permissions": ["activeTab", "scripting"],
"action": {
"default_popup": "popup.html",
},
"background": {
"service_worker": "background.js"
}
}
A continuación creamos el HTML de la ventana flotante que se abrirá cuando hagamos click en la extensión. Este será popup.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encabezados</title>
<script src="popup.js" defer></script>
</head>
<body>
<h1>Encabezados de la página</h1>
<ul id="headings-list"></ul>
</body>
</html>
Como podemos ver desde el <head> importamos el javascript que vamos a ejecutar. Lo mantenemos en archivos separados para tener un código más limpio.
document.addEventListener("DOMContentLoaded", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
let response = await chrome.scripting.executeScript({
target: { tabId: tab.id },
function: extractHeadings
});
let headings = response[0].result;
let list = document.getElementById("headings-list");
headings.forEach(heading => {
let li = document.createElement("li");
li.textContent = heading;
list.appendChild(li);
});
});
function extractHeadings() {
return Array.from(document.querySelectorAll("h1, h2, h3")).map(h => h.textContent);
}
Aquí básicamente lo que hemos hecho es acceder a la pestaña actual y ejecutar sobre ella la función extractHeadings. Es una función muy simple que crea un array de encabezados.
Por último, creamos el archivo background.js.
chrome.runtime.onInstalled.addListener(() => {
console.log("Extensión instalada correctamente");
});
¿Por qué background.js es tan simple?
En esta extensión específica, background.js no realiza ninguna funcionalidad avanzada, ya que la extracción de los encabezados se maneja directamente desde popup.js. Sin embargo, sí nos haría falta para:
- Escuchar eventos del navegador: cambios en las pestañas, ventanas, actualizaciones de la extensión, etc.
- Comunicación entre scripts: modificar contenido de las páginas (no del popup) dinámicamente.
- Gestionar almacenamiento y datos persistentes: como almacenar datos a largo plazo con
chrome.storage.
Añade un icono a tu extensión
Añadir un icono a una extensión de Chrome es algo muy sencillo. Debes seguir los siguientes dos pasos:
-
Prepara los iconos: Asegúrate de tener los archivos de imagen en diferentes tamaños, como 16x16, 48x48 y 128x128 píxeles. Puedes utilizar más tamaños si lo deseas. Se recomienda usar preferiblemente formato
.png. -
Edita el archivo
manifest.json: Añade la propiedadiconsa tu archivo de manifiesto.
{
"manifest_version": 3,
"name": "Headings Extractor",
"version": "1.0",
"description": "Extrae los encabezados de la página actual",
"permissions": ["activeTab", "scripting"],
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"action": {
"default_icon": "icons/icon16.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
}
}
¡Con esto ya deberías tener tu icono funcionando en la extensión de Chrome!
Probando y depurando tu extensión
Antes de publicar la extensión, es crucial probarla en modo desarrollador dentro de Chrome. Para ello, sigue los siguientes pasos:
- Accede a
chrome://extensions/. - Activa el Modo desarrollador.
- Ve a Cargar descomprimida. Se te abrirá un ventana y selecciona la carpeta en la que tengas el proyecto, es decir, la carpeta con todos los archivos que hemos creado anteriormente.
Aquí pueden surgir errores comunes como mal formato del manifest.json o errores del propio código. También es importante que revises los permissions para que tu extensión tenga los permisos correctos para lo que quiera realizar.
Una vez carguemos la extensión se vería así:
Podemos fijar la extensión para tenerla siempre en la barra superior. Para usarla nos vamos a cualquier página web y hacemos click sobre ella:
Como podemos ver, funciona correctamente.
Mejorando tu extensión: Ideas para hacerla más potente
Las extensiones pueden evolucionar con el tiempo. Algunas mejoras incluyen:
- Agregar una configuración personalizada para los usuarios.
- Integrar APIs externas para expandir funcionalidades.
- Optimizar el rendimiento para mejorar la experiencia del usuario.
Pequeños ajustes pueden marcar la diferencia y convertir una extensión sencilla en una herramienta poderosa y útil para miles de personas.
Conclusión y siguientes pasos
En pocos minutos, has creado una extensión funcional para Chrome. Desde entender la estructura básica hasta probarla dejarla lista para publicar (lo cual hablaremos en siguientes artículos), el proceso es accesible incluso para principiantes.
Existen numerosos recursos adicionales para profundizar en el desarrollo de extensiones y llevarlas al siguiente nivel. Además, si la extensión ofrece valor a los usuarios, podría monetizarse mediante suscripciones o anuncios.
Explorar el ecosistema de extensiones de Chrome es una excelente manera de mejorar habilidades en desarrollo web y crear herramientas útiles para la comunidad.
Posts Relacionados
Cómo Integrar y Personalizar Tailwind CSS en Proyectos con Astro Framework
¿Cómo usar Tailwind en Astro? Aprende a combinar estas herramientas para un diseño web eficiente y atractivo Guía esencial
Mejores prácticas para mejorar la Optimización de tu Página Web
Descubre cómo se realiza una optimización de páginas web, analizar el rendimiento del sitio y mejorar el SEO y la experiencia de los usuarios.
Cómo Crear y Configurar un Sitemap en Astro para Mejorar tu SEO
Descubre cómo hacer un Astro Sitemap desde cero. Mejora tu visibilidad en buscadores con esta guía paso a paso. ¡Entra ya!
Guía Completa del Patrón MVC en PHP: Cómo Funciona y Cómo Implementarlo
Aprende a implementar el patrón MVC en PHP sin frameworks. Desglose completo de la estructura del proyecto, rutas, controladores, modelos y vistas con ejemplos.
JSON Web Tokens (JWT): Guía Esencial y Buenas Prácticas
¿Qué es un JSON Web Token? ️ Guía completa con un ejemplo práctico en Node.js para crear tokens seguros y proteger tu app. ️
Guía para configurar Redirecciones web utilizando Cloudflare
️ Descubre los secretos para configurar una redirección web Cloudflare en minutos. ¡Haz clic y sorpréndete! ️