Cómo Crear Tu Primera Extensión de Firefox
Crear una extensión de Firefox puede parecer intimidante, pero con Manifest V3 y las modernas APIs de WebExtensions, puedes desarrollar tu primera extensión funcional en menos de 10 minutos. Este tutorial de extensiones de Firefox te guiará en la creación de una extensión MV3 funcional que modifica páginas web e incluye una interfaz popup.
Puntos Clave
- Crea una extensión de Firefox funcional usando Manifest V3 en menos de 10 minutos
- Desarrolla content scripts que modifiquen páginas web de forma segura en contextos aislados
- Implementa interfaces popup para la interacción del usuario con paso de mensajes
- Sigue las mejores prácticas de seguridad con permisos mínimos y scripts externos
¿Qué Son las WebExtensions y Por Qué Manifest V3?
Las WebExtensions son complementos compatibles entre navegadores construidos con tecnologías web estándar: HTML, CSS y JavaScript. Firefox WebExtensions Manifest V3 representa el estándar actual para el desarrollo de extensiones, ofreciendo seguridad mejorada mediante service workers, mejor rendimiento con APIs declarativas y mayor compatibilidad entre navegadores.
Aunque Firefox todavía soporta Manifest V2, comenzar con Manifest V3 garantiza que tu extensión permanezca compatible con futuras actualizaciones del navegador y se alinee con la arquitectura de extensiones de Chrome, Edge y Safari. Esta guía se enfoca exclusivamente en las mejores prácticas de MV3.
Configuración de la Estructura del Proyecto de Tu Extensión de Firefox
Construyamos tu primera extensión de Firefox paso a paso. Crea una nueva carpeta llamada my-first-extension y añade estos archivos esenciales:
Creación de la Configuración Manifest V3
El archivo manifest.json es el corazón de cualquier extensión. Crea este archivo con la siguiente configuración Manifest V3:
{
"manifest_version": 3,
"name": "My Page Enhancer",
"version": "1.0.0",
"description": "Enhances web pages with custom styling",
"action": {
"default_popup": "popup.html",
"default_icon": {
"48": "icon.png"
}
},
"content_scripts": [
{
"matches": ["*://*.example.com/*"],
"js": ["content.js"]
}
],
"icons": {
"48": "icon.png"
}
}Observa el uso de "action" en lugar del obsoleto "browser_action"—este es un requisito clave para Firefox MV3. El manifest sigue los principios de permisos mínimos, una práctica fundamental en extensiones de Firefox.
Construcción del Content Script para Modificación de Páginas
Los content scripts de MV3 se ejecutan en un contexto aislado, protegiendo el código de tu extensión de scripts maliciosos en las páginas. Crea content.js:
// content.js - Runs on matching pages
console.log('Extension loaded on:', window.location.href);
// Add a subtle border to all paragraphs
document.querySelectorAll('p').forEach(paragraph => {
paragraph.style.border = '2px solid #4A90E2';
paragraph.style.padding = '8px';
paragraph.style.borderRadius = '4px';
});
// Listen for messages from the popup
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === 'changeColor') {
document.body.style.backgroundColor = request.color;
}
});Esto demuestra cómo Manifest V3 aísla el código de la extensión del contexto de la página, previniendo vulnerabilidades de seguridad comunes en arquitecturas de extensiones más antiguas.
Discover how at OpenReplay.com.
Creación de la Interfaz Popup de Acción de Firefox
El componente action popup proporciona interacción con el usuario. Crea popup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
width: 300px;
padding: 16px;
font-family: system-ui, -apple-system, sans-serif;
}
button {
width: 100%;
padding: 8px;
margin: 4px 0;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Page Enhancer</h2>
<button id="blue">Blue Background</button>
<button id="green">Green Background</button>
<script src="popup.js"></script>
</body>
</html>Añade el correspondiente popup.js para manejar las interacciones del usuario:
// popup.js - Handles popup interactions
document.getElementById('blue').addEventListener('click', () => {
sendColorChange('#E3F2FD');
});
document.getElementById('green').addEventListener('click', () => {
sendColorChange('#E8F5E9');
});
async function sendColorChange(color) {
const [tab] = await browser.tabs.query({
active: true,
currentWindow: true
});
browser.tabs.sendMessage(tab.id, {
action: 'changeColor',
color: color
});
}Carga y Prueba de Tu Complemento JavaScript de Firefox
Para probar tu complemento JavaScript de Firefox:
- Abre Firefox y navega a
about:debugging - Haz clic en “This Firefox” en la barra lateral izquierda
- Haz clic en “Load Temporary Add-on”
- Selecciona cualquier archivo de la carpeta de tu extensión
El icono de tu extensión aparece en la barra de herramientas. Visita cualquier página de example.com para ver el content script en acción. Haz clic en el icono de la extensión para abrir el popup y probar los cambios de color de fondo.
Cuando modifiques archivos, haz clic en “Reload” en about:debugging para aplicar los cambios instantáneamente—no se requiere reiniciar el navegador.
Mejores Prácticas de Extensiones de Firefox para Desarrollo MV3
Seguir estas mejores prácticas de extensiones de Firefox garantiza que tu extensión pase la revisión y proporcione una experiencia de usuario segura:
- Permisos Mínimos: Solo solicita
activeTabcuando necesites acceso a la pestaña actual, evitando permisos amplios de host - Sin JavaScript Inline: La Content Security Policy de MV3 bloquea scripts inline—usa siempre archivos
.jsexternos - Service Workers: Para tareas en segundo plano, usa service workers (no cubierto aquí pero esencial para funciones avanzadas)
- Comunicación Segura: Usa
browser.runtime.sendMessage()para la comunicación entre componentes
Conclusión
Has creado exitosamente una extensión de Firefox funcional usando Manifest V3. La transición de simples content scripts a extensiones completas sigue este mismo patrón: contextos aislados, paso de mensajes y permisos mínimos. Domina estos fundamentos y construirás extensiones seguras y eficientes en las que los usuarios confían.
Para expandir tus habilidades, explora la Storage API para persistir preferencias de usuario, implementa service workers en segundo plano para manejo complejo de eventos, y revisa la última documentación de WebExtensions en MDN para actualizaciones de API.
Preguntas Frecuentes
Sí, las WebExtensions que usan Manifest V3 son en gran medida compatibles entre navegadores. Existen diferencias menores en los espacios de nombres de API donde Chrome usa chrome y Firefox usa browser, pero Firefox soporta ambos por compatibilidad.
El archivo manifest.json especifica patrones de coincidencia en la sección content_scripts. Cambia el array matches para incluir otros dominios o usa patrones más amplios como *://*/* para todos los sitios, aunque esto requiere una consideración cuidadosa de seguridad.
Empaqueta tu extensión como un archivo ZIP, crea una cuenta de desarrollador en addons.mozilla.org, envía tu extensión para revisión y espera la aprobación. Firefox típicamente revisa extensiones en 24-48 horas.
Los content scripts se ejecutan en contextos de páginas web y pueden acceder y modificar elementos del DOM. Los background scripts en MV3 usan service workers que manejan eventos y llamadas a API pero no pueden acceder directamente al contenido de la página, requiriendo paso de mensajes para la comunicación.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
