Featured image of post Desarrollo de extensiones de navegador con Manifest V3Featured image of post Desarrollo de extensiones de navegador con Manifest V3
Software

Desarrollo de extensiones de navegador con Manifest V3

Una guía para principiantes sobre cómo crear extensiones de navegador modernas compatibles con el estándar Manifest V3 de Chrome.

  1. Inicio
  2. Softwares
  3. Desarrollo de extensiones de navegador con Manifest V3

Manifest V3 es ahora la especificación oficial y obligatoria para crear extensiones de Google Chrome. Con la descontinuación de Manifest V2, los desarrolladores deben adoptar Service Workers no persistentes para el procesamiento en segundo plano y adaptarse al modelo de solicitud de red declarativa. Esta guía explica los cambios arquitectónicos centrales en Manifest V3 y proporciona un tutorial simple para configurar una extensión compatible.

1. Cambios principales de Manifest V2 a V3

Manifest V3 (MV3) fue diseñado para hacer que las extensiones del navegador sean más seguras, respetuosas con la privacidad y eficientes.

1) Transición de páginas de fondo a Service Workers

En MV2, las extensiones ejecutaban páginas de fondo persistentes (background.js). En MV3, los scripts de fondo son reemplazados por Service Workers. Los Service Workers son efímeros: el navegador los termina cuando están inactivos para conservar memoria del sistema. Como las variables en memoria no persisten, los desarrolladores deben almacenar el estado de la aplicación usando la API chrome.storage.

2) Intercepción de red con declarativeNetRequest

La antigua API webRequest permitía a las extensiones interceptar y modificar todo el tráfico de red entrante y saliente usando JavaScript. Por razones de seguridad, MV3 impone la API declarativeNetRequest. En lugar de ejecutar lógica personalizada en cada solicitud, las extensiones registran reglas de bloqueo declarativas que el navegador procesa de forma nativa.

3) Prohibición de código alojado remotamente

Por auditoría de seguridad, ya no se permite que las extensiones descarguen y ejecuten archivos JavaScript externos (ej., cargar jQuery o Google Analytics desde un CDN). Todo el código ejecutado por la extensión debe estar incluido localmente en el paquete de la extensión.

2. Estructura básica de archivos Manifest V3

Aquí hay una implementación de inicio para una extensión que abre una UI de ventana emergente.

1) El archivo de configuración: manifest.json

Define los metadatos, permisos, service worker de fondo y acciones de la interfaz de usuario:

{
  "manifest_version": 3,
  "name": "NetGuide MV3 Sample",
  "version": "1.0.0",
  "description": "Una extensión de inicio que demuestra las características de Manifest V3.",
  "permissions": [
    "storage",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

2) El script de fondo: background.js

Implementa manejadores basados en eventos que responden cuando es necesario:

// Registrar estado predeterminado en la instalación
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set({ extensionActive: true });
  console.log("Extensión instalada e inicializada.");
});

// Reaccionar a los cambios de activación de pestañas
chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.storage.local.get(["extensionActive"], (result) => {
    if (result.extensionActive) {
      console.log(`Pestaña activa cambiada a: ${activeInfo.tabId}`);
    }
  });
});

3) La UI: popup.html y popup.js

Diseña la interfaz HTML y carga el script de la ventana emergente local:

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { width: 180px; font-family: sans-serif; padding: 10px; }
    button { width: 100%; padding: 6px; background: #2563eb; color: white; border: none; border-radius: 4px; }
  </style>
</head>
<body>
  <h4>Herramienta NetGuide</h4>
  <button id="action-btn">Verificar estado</button>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.getElementById('action-btn').addEventListener('click', () => {
  chrome.storage.local.get(["extensionActive"], (result) => {
    alert(`Estado de extensión activa: ${result.extensionActive}`);
  });
});

3. Consejos de desarrollo y depuración

  • Manejo de tiempos de espera por inactividad: Como los Service Workers de MV3 dejan de ejecutarse cuando están inactivos, los temporizadores estándar de JavaScript como setInterval fallarán. Usa la API chrome.alarms para programar procesos periódicos.
  • Auditorías de consola: Para cargar tu extensión, abre chrome://extensions en Google Chrome, activa “Modo desarrollador”, haz clic en “Cargar descomprimida” y selecciona tu carpeta de desarrollo. Verifica los mensajes de fondo haciendo clic en el enlace “Inspeccionar vistas: Service worker”.

4. Conclusión: Navegando Manifest V3

Aunque la transición a Manifest V3 inicialmente introdujo limitaciones en APIs específicas (afectando a bloqueadores de anuncios y herramientas de seguridad), la plataforma se ha estabilizado. Implementar extensiones bajo MV3 asegura que tus plugins cumplan con los estándares modernos de seguridad del navegador, proporcionando a los usuarios una experiencia de navegación segura y optimizada.

©2022 - 2026 Kaisekukun