Cómo crear una extensión para Firefox: tutorial definitivo con Manifest V3

Crear una extensión para Firefox puede sonar complicado al principio, pero lo cierto es que es un proceso mucho más accesible de lo que imaginas. Actualmente, gracias a la estandarización de tecnologías web y a la evolución de las APIs de los navegadores, desarrollar complementos que aumentan la funcionalidad de tu Firefox es una aventura al alcance de cualquier persona con unos conocimientos básicos de HTML, CSS y JavaScript. Además, la compatibilidad de las extensiones entre navegadores como Chrome, Edge y Opera hace que tus creaciones puedan tener un público aún más amplio. ¿Quieres convertir una necesidad personal o una idea en una herramienta real que todos los usuarios de Firefox puedan instalar en segundos? Aquí te lo contamos absolutamente todo: desde la base tecnológica, el paso a paso para levantar una extensión moderna siguiendo Manifest V3, hasta los detalles prácticos para su gestión, distribución y recomendaciones de buenas prácticas en desarrollo.

Las extensiones han cambiado la forma en que usamos nuestros navegadores; nos permiten adaptar nuestro entorno digital, automatizar tareas, aplicar mejoras visuales o incluso desarrollar potentes funcionalidades para casos de uso profesionales. En este artículo vas a encontrar muchísima información útil y bien explicada, desde el significado de los WebExtensions y los cambios de los manifiestos, pasando por la estructura de archivos recomendada, hasta ejemplos reales y pequeñas trampas que deberías evitar. Te desgranamos paso a paso cómo escribir tu primer complemento y, de paso, te ofrecemos un repaso a las mejores extensiones para inspirarte o complementar tu día a día.

¿Qué es una extensión de Firefox y por qué deberías crear una?

Las extensiones de Firefox —también conocidas como add-ons o complementos— son pequeños programas desarrollados con tecnologías web estándar, como JavaScript, HTML y CSS, que amplían de forma significativa las capacidades del navegador. Gracias a las WebExtensions, hoy en día el desarrollo se ha simplificado y estandarizado, favoreciendo la creación de extensiones que funcionan, casi sin cambios, tanto en Firefox como en navegadores basados en Chromium (como Chrome, Opera o Edge). Así, si ya tienes experiencia desarrollando para Chrome, el salto a Firefox será mínimo. Y si partes de cero, crear tu primer proyecto es ahora más sencillo y seguro que nunca gracias al estándar Manifest V3, que marca las pautas para una mayor seguridad, mejor rendimiento, y alineación con las defensas anti-malware que buscan proteger al usuario.

¿Por qué crear tu propia extensión? Las razones pueden ser infinitas: desde ideas para mejorar la accesibilidad (como activar un modo oscuro universal), pasando por pequeñas herramientas de productividad (gestionar tus pestañas, modificar aspectos visuales de las web que visitas, destacar información útil), hasta la creación de complementos para equipos de QA en empresas. Incluso puedes pensar en construir componentes que interactúen con APIs externas, generen notificaciones o transformen tu experiencia de usuario. Desarrollar una extensión, además, es una excelente vía para aprender a programar y entender mejor cómo funciona la web.

Fundamentos técnicos: WebExtensions y el nuevo Manifest V3

Las WebExtensions son el nombre que recibe el API estándar utilizado en los navegadores modernos para crear extensiones basadas en código web. Firefox soporta el estándar Manifest V3, una evolución clave con respecto a la edición anterior (V2), que introduce cambios como el uso obligatorio de service workers en los scripts de fondo, una política mucho más estricta sobre los permisos, y la eliminación de funcionalidades consideradas inseguras. El archivo manifest.json sigue siendo el corazón de tu complemento: ahí indicas el nombre, los permisos, los scripts que necesita, los iconos, la interfaz de usuario (popup), los archivos a ejecutar e, incluso, las URLs de las páginas donde quieres que tu código actúe.

El cambio esencial de V3 es el paso de ‘browser_action’ a ‘action’, el abandono de JavaScript embebido y el uso de scripts y estilos externos (por la política CSP), y la declaración explícita de permisos y contexto. Esto significa más seguridad, y por tanto, que debes cuidar desde el día uno la estructura, modularidad y claridad del código. Un manifiesto puede ser, por ejemplo:

{
  "manifest_version": 3,
  "name": "Mi extensión personalizada",
  "version": "1.0.0",
  "description": "Ejemplo didáctico de extensión Firefox usando Manifest V3",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {"48": "icon.png"}
  },
  "content_scripts": ,
      "js": 
    }
  ],
  "icons": {"48": "icon.png"}
}

Recuerda: cada permiso que declares afectará a la revisión de tu extensión y a la confianza de los usuarios.

Estructura básica y archivos necesarios para tu proyecto

Una extensión de Firefox bien organizada parte de una estructura de directorios clara, donde cada bloque de funcionalidad o interfaz tiene su propio archivo y, si es necesario, una carpeta específica. El esqueleto más habitual y recomendable incluye:

• manifest.json: El archivo central con la configuración global de la extensión.
• popup.html, popup.js, popup.css: Ficheros que definen la interfaz que se muestra al pulsar el icono de la extensión y gestionan las interacciones del usuario.
• content_scripts (ej: content.js): Scripts que se inyectan en las páginas web para modificarlas o interactuar con ellas automáticamente cuando el usuario las navega.
• iconos y recursos gráficos: Imágenes para el identificador de la extensión, con diferentes resoluciones (lo mínimo, 48×48 y 128x128px).
• js/css de terceros (librerías opcionales): Puedes incluir, si lo requieres, frameworks o librerías alojadas localmente o bien referenciadas desde una CDN.

Mantener el código separado y modular te permite escalar la extensión y depurar problemas fácilmente. También facilita el cumplir con la política de seguridad de los navegadores, que impiden la ejecución de JavaScript en línea en los HTML por defecto.

Paso a paso: cómo crear una extensión para Firefox con Manifest V3

Sigamos un ejemplo guiado para desarrollar una pequeña extensión funcional, inspirada en los proyectos de la propia documentación de Mozilla MDN y la guía práctica de OpenReplay. En este ejemplo, al pulsar el icono podrás cambiar el color de fondo de la página y resaltar los párrafos con un borde estilizado.

1. Crea una carpeta para tu extensión (por ejemplo, my-first-extension).
2. Añade el archivo manifest.json con la configuración estándar de Manifest V3 descrita arriba.
3. Prepara content.js para ejecutar sobre ciertas páginas y aplicar estilos personalizados:
   
// content.js
document.querySelectorAll('p').forEach(paragraph => {
paragraph.style.border = '2px solid #4A90E2';
paragraph.style.padding = '8px';
paragraph.style.borderRadius = '4px';
});
browser.runtime.onMessage.addListener((request) => {
if (request.action === 'changeColor') {
document.body.style.backgroundColor = request.color;
}
});

4. Crea popup.html para la interfaz:
   
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>body{width:300px;padding:16px;font-family:sans-serif;}button{width:100%;padding:8px;margin:4px 0;cursor:pointer;}</style>
</head>
<body>
<h2>Page Enhancer</h2>
<button id="blue">Fondo Azul</button>
<button id="green">Fondo Verde</button>
<script src="popup.js"></script>
</body>
</html>

5. Implementa popup.js para comunicarte con el content script:
   
document.getElementById('blue').addEventListener('click', () => sendColorChange('#E3F2FD'));
document.getElementById('green').addEventListener('click', () => sendColorChange('#E8F5E9'));
async function sendColorChange(color) {
const = await browser.tabs.query({ active: true, currentWindow: true });
browser.tabs.sendMessage(tab.id, { action: 'changeColor', color: color });
}

6. Incluye icon.png en la raíz, para los iconos de la interfaz.

¿Cómo probar tu extensión? Solo tienes que abrir Firefox, entrar en about:debugging → «This Firefox», y pulsar en «Load Temporary Add-on» para cargar el archivo manifest.json o cualquier archivo del directorio donde desarrollas tu extensión. Cuando quieras actualizar, haz clic en «Recargar». ¡Todo sin reiniciar el navegador!

El lado oscuro de las extensiones de Chrome: riesgos, amenazas y cómo protegerte

¿Qué funcionalidades puedes añadir a tu complemento?

Las posibilidades son enormes: desde simples modificaciones visuales (como cambiar colores, ocultar elementos molestos o ajustar tamaños de texto) hasta automatizar tareas, recolectar datos de la página o mostrar alertas contextuales. Puedes conectar tu extensión con API externas (p.ej. para recibir notificaciones del clima, leer feeds RSS, integrar tus notas, etc.), manipular el DOM a gusto o interceptar eventos del usuario. Por ejemplo, un content script puede buscar y resaltar fragmentos de texto específicos, mejorar la navegación en largas páginas, insertar nuevos botones o widgets y facilitar la accesibilidad para todo tipo de usuarios.

Además, gracias a la API de WebExtensions, puedes aprovechar componentes avanzados como:

• Tabs API: Para controlar pestañas, inyectar código y realizar acciones personalizadas sobre el navegador.
• Almacenamiento (storage): Guardar y restaurar opciones del usuario o configuraciones persistentes.
• Service Workers: Procesos en segundo plano para escuchar eventos y gestionar notificaciones aún cuando el popup no esté abierto.
• Notificaciones, acceso al portapapeles, capturas de pantalla y más: Funcionalidades cada vez más amplias y potentes, aunque recuerda que muchas necesitan permisos explícitos en el manifest.json

Revisa la documentación de Mozilla MDN y experimenta, porque la cantidad de APIs nativas cada vez es mayor.

Mejores prácticas para el desarrollo de extensiones Firefox contemporáneas

Si quieres que tu extensión pase los exhaustivos controles de seguridad de Mozilla, y sea realmente útil para los usuarios, sigue estos consejos clave:

• Usa permisos mínimos: No pidas más acceso del estrictamente necesario. Utiliza el permiso «activeTab» cuando sea posible. Permisos como «tabs» o «*://*/*» deberían emplearse solo si es imprescindible.
• Evita JavaScript en línea: La política de seguridad de Manifest V3 impide el uso de scripts en línea. Todo el JS y CSS debe estar en archivos separados y referenciados correctamente en el manifest y en el HTML.
• Estructura modular: Separa la lógica de la interfaz y los content scripts, y organiza el repositorio de forma escalable. Prueba y depura cada parte de forma aislada antes de integrarlas.
• Service Workers para scripts de fondo: Aunque en este ejemplo sencillo no los usamos, los service workers son indispensables para tareas avanzadas (alarmas, sincronización, escucha de eventos, etc.). Aprende a utilizarlos para futuras ampliaciones.
• Comunicación entre scripts: Usa los métodos como browser.runtime.sendMessage() para que el content script pueda interactuar con el popup y viceversa, siempre en canales seguros y controlados.

Cómo instalar, gestionar y eliminar extensiones en Firefox

El proceso para instalar una extensión en Firefox es sumamente sencillo:

1. Entra en el menú principal de Firefox y selecciona «Complementos y temas» (también puedes pulsar Ctrl + Shift + A o escribir about:addons en la barra de direcciones).
2. Desde ahí, accede a la tienda oficial de extensiones de Firefox. Puedes buscar categorías, filtrar por popularidad, tendencias o puntuaciones y explorar el catálogo fácilmente.
3. Cuando encuentres una extensión interesante, revisa su puntuación, descripción y permisos solicitados antes de instalarla.
4. Pulsa en «Añadir» y, tras confirmar los permisos, la extensión quedará instalada y disponible desde el área correspondiente del navegador.
5. Si alguna vez quieres desinstalar o desactivar una extensión, puedes hacerlo desde el gestor de complementos rápidamente (hay un interruptor azul para desactivar o la opción «eliminar»).

¿Dónde se almacenan los archivos de las extensiones? En Windows, normalmente en la ruta C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\\extensions. En Mac: Users//Library/Application Support/Firefox/Profiles//extensions. A menos que tengas experiencia avanzada, no es necesario tocar estos archivos manualmente; todas las operaciones comunes se realizan desde el gestor del navegador.

Consejos de seguridad y revisión de permisos

Las extensiones de Firefox son en general muy seguras siempre que sigas una regla de oro: descarga e instala únicamente desde fuentes confiables como la tienda oficial de complementos de Firefox. Mozilla revisa manualmente (o de forma automatizada en los casos menos populares) todos los complementos para detectar fallos de seguridad, aunque siempre debes estar atento a los permisos solicitados y desconfiar de extensiones poco conocidas que pidan demasiado acceso o tengan advertencias.

Si ves la advertencia «este complemento no está supervisado activamente por Mozilla», tómate unos minutos para comprobar que el desarrollador es de confianza antes de instalarlo.

¿Puedo reutilizar el código de una extensión para Chrome en Firefox?

La respuesta corta es SÍ, la mayoría de las veces sí puedes. El estándar WebExtensions fue creado precisamente para que el mismo código (especialmente desde Manifest V3) funcione, con mínimos cambios, en Firefox, Chrome, Edge y Opera. Debes revisar los detalles de compatibilidad y, sobre todo, los APIs específicos de cada navegador (algunas funciones concretas, permisos o métodos pueden variar ligeramente). Mozilla ofrece incluso herramientas de migración para portar extensiones de Chrome a Firefox, lo que facilita el traspaso y reduce riesgos.

Amplía y publica tu propia extensión en Firefox Add-ons

Cuando tu proyecto esté listo para ver la luz, puedes publicarlo oficialmente para que otros usuarios puedan instalarlo desde la tienda de complementos (AMO, Add-ons for Firefox). Para ello:

1. Regístrate con tu cuenta Firefox en el Developer Hub de Mozilla.
2. Sigue el asistente de subida, completando los datos de metadatos, capturas, descripción y la categoría.
3. Pasa el sistema de revisión y comprobación de seguridad. Aquí, es donde es fundamental haber seguido las buenas prácticas y limitar los permisos a lo imprescindible.
4. Cuando esté todo correcto, tu extensión se hará pública y aparecerá en los resultados de búsqueda de la tienda.

Si desarrollaste también para Chrome Web Store, recuerda que allí el proceso es parecido, aunque debes abonar una tasa única de verificación de 5 dólares.

Inspiración: listado de las mejores extensiones de Firefox y casos de uso

A modo de ejemplo, aquí tienes algunas de las extensiones mejor valoradas y más útiles desarrolladas para Firefox, perfectas para aprender buenas prácticas, inspirarte o descubrir nuevas necesidades:

• LastPass: Gestor de contraseñas multiplataforma, con integración en todos los dispositivos y alto nivel de seguridad (encriptación de grado militar).
• uBlock Origin: Un bloqueador de publicidad y rastreadores ligero y eficaz, muy recomendable.
• LanguageTool: Corrector ortográfico y gramatical para emails, redes sociales, blogs, etc.
• SEOQuake: Herramienta de auditoría SEO en tiempo real, para monitorizar backlinks, tráfico, compatibilidad móvil y datos sociales.
• Tranquility Reader: Mejora la legibilidad, elimina elementos molestos y permite personalizar la experiencia de lectura online.
• Tomato Clock: Temporizador productivo que sigue la técnica Pomodoro, ideal para gestionar tareas y descansos.
• Tree Style Tab: Organización visual de pestañas en «árboles» anidados para quienes abren muchas páginas al trabajar.
• FireShot: Capturas completas de páginas web, con opciones de anotación y guardado en varios formatos.
• Avast Online Security: Aporta seguridad adicional gracias a reputación de sitios por crowdsourcing; ayuda a evitar fraudes y malware.
• Dark Reader: Activa modo oscuro universal, muy útil para descansar la vista.
• Stylus: Te permite rediseñar el CSS de cualquier web a tu gusto.
• Enhancer for YouTube: Control absoluto sobre la experiencia en YouTube, incluyendo atajos, calidad por defecto, anuncios, entre otros.

Si quieres ver cómo están implementadas, muchas son open source y mantienen su código en GitHub, lo que las convierte en un excelente recurso educativo.

Preguntas frecuentes y recomendaciones finales

• ¿Por qué mi extensión solo funciona en páginas concretas? La clave está en la propiedad «matches» de content_scripts en el manifest.json: solo se ejecuta en las URLs seleccionadas. Cambia o amplía este patrón para abarcar más sitios.
• ¿Se puede portar una extensión de Chrome a Firefox directamente? En la mayoría de los casos, sí: revisa los pequeños matices de API y los permisos.
• ¿Qué diferencia hay entre scripts de contenido y scripts de fondo? Los scripts de contenido se inyectan en la página actual y acceden al DOM; los scripts de fondo (background scripts o service workers en MV3) ejecutan tareas persistentes o escuchan eventos entre sesiones.
• ¿Es seguro añadir extensiones de cualquier fuente? Mejor ceñirse a la tienda oficial y revisar los permisos cuidadosamente antes de instalar.
• ¿Dónde encontrar ejemplos y documentación oficial? La mejor fuente es la sección de y los repositorios de ejemplos en GitHub de Mozilla y la comunidad.

Las extensiones de Firefox están pensadas para que puedas adaptarlas a cualquier rutina, workflow profesional o simple necesidad personal de un modo cómodo, seguro y 100% personalizable. Desde el ejemplo más básico que añade un simple borde a ciertas páginas, hasta sistemas completos para automatizar trabajos, aumentar tu productividad o proteger tu privacidad, el límite lo pone tu creatividad. Armado con la información, buenas prácticas y herramientas que te hemos detallado aquí, tienes ya todas las claves para desarrollar tu primer complemento y, si te animas, compartirlo con miles de usuarios y contribuir a hacer la web —un poco— mejor.