Desarrollo de extensiones de navegador: Manifest V3 y APIs de JavaScript

Las extensiones de navegador son pequeños programas de software que personalizan la experiencia de navegación. Pueden agregar nuevas funciones, modificar el contenido de sitios web, bloquear anuncios y mucho más. Con la llegada de Manifest V3, la forma en que se construyen y operan las extensiones ha sufrido cambios significativos. Esta guía completa explorará el desarrollo de extensiones de navegador utilizando Manifest V3 y las APIs de JavaScript, brindándole el conocimiento para crear extensiones potentes y seguras para los navegadores modernos.

¿Qué son las extensiones de navegador?

Las extensiones de navegador son esencialmente mini-aplicaciones que se ejecutan dentro de un navegador web. Extienden la funcionalidad del navegador y se integran perfectamente con las páginas web. Las extensiones se escriben utilizando tecnologías web estándar como HTML, CSS y JavaScript, lo que las hace relativamente accesibles para los desarrolladores web.

Ejemplos de extensiones de navegador populares incluyen:

• Bloqueadores de anuncios: Bloquean anuncios en las páginas web, mejorando la velocidad de navegación y reduciendo las distracciones.
• Administradores de contraseñas: Almacenan y administran contraseñas de forma segura, rellenándolas automáticamente en los sitios web.
• Extensiones para tomar notas: Permiten a los usuarios tomar notas y guardarlas directamente desde las páginas web.
• Herramientas de productividad: Mejoran la productividad al proporcionar funciones como la gestión de tareas, el seguimiento del tiempo y los modos de enfoque.
• Herramientas de traducción de idiomas: Traducen páginas web a diferentes idiomas con un solo clic. Ejemplo: Extensión de Google Translate.
• Extensiones VPN: Proxyfican el tráfico de Internet para evitar restricciones geográficas y mejorar la privacidad.

La importancia de Manifest V3

Manifest V3 es la última versión del archivo manifest, que es un archivo JSON que describe la extensión al navegador. Describe el nombre de la extensión, la versión, los permisos, los scripts en segundo plano y otros metadatos esenciales. Manifest V3 introduce varios cambios clave en comparación con su predecesor, Manifest V2, centrándose principalmente en la seguridad y el rendimiento.

Cambios clave en Manifest V3:

• Service Workers: Manifest V3 reemplaza las páginas en segundo plano con service workers. Los service workers son scripts controlados por eventos que se ejecutan en segundo plano sin requerir una página persistente. Son más eficientes y menos intensivos en recursos que las páginas en segundo plano.
• API Declarativa de Solicitudes de Red: Esta API permite a las extensiones modificar las solicitudes de red sin interceptarlas directamente. Mejora la seguridad y el rendimiento al descargar la lógica de filtrado al navegador.
• Política de seguridad de contenido (CSP) más estricta: Manifest V3 aplica reglas CSP más estrictas para evitar la ejecución de código arbitrario, mejorando aún más la seguridad.
• APIs basadas en promesas: Muchas APIs ahora están basadas en promesas, lo que facilita la gestión de operaciones asíncronas.

¿Por qué el cambio a Manifest V3?

• Seguridad mejorada: Manifest V3 está diseñado para mejorar la seguridad de las extensiones de navegador y proteger a los usuarios del código malicioso.
• Rendimiento mejorado: Los service workers y la API Declarativa de Solicitudes de Red contribuyen a un mejor rendimiento y una menor consumo de recursos.
• Mayor privacidad: Manifest V3 tiene como objetivo dar a los usuarios más control sobre sus datos y privacidad.

Configuración de su entorno de desarrollo

Antes de comenzar a desarrollar extensiones de navegador, debe configurar su entorno de desarrollo. Esto implica instalar un editor de código, elegir un navegador para las pruebas y comprender la estructura básica de archivos de una extensión.

1. Editor de código

Elija un editor de código con el que se sienta cómodo. Las opciones populares incluyen:

• Visual Studio Code (VS Code): Un editor de código gratuito y potente con excelente soporte para JavaScript y otras tecnologías web.
• Sublime Text: Un editor de código rápido y personalizable con una amplia gama de complementos.
• Atom: Un editor de código gratuito y de código abierto desarrollado por GitHub.

2. Navegador para pruebas

Seleccione un navegador para probar sus extensiones. Chrome y Firefox son las opciones más populares, ya que ofrecen herramientas de desarrollo sólidas y soporte para el desarrollo de extensiones.

3. Estructura básica de archivos

Una extensión de navegador generalmente consta de los siguientes archivos:

• manifest.json: Este archivo contiene los metadatos de la extensión, como su nombre, versión, permisos y scripts en segundo plano.
• background.js (o script del service worker): Este script se ejecuta en segundo plano y maneja eventos como acciones del navegador y clics en el menú contextual.
• content.js: Este script se ejecuta en el contexto de las páginas web y puede modificar su contenido.
• popup.html: Este archivo define la interfaz de usuario de la ventana emergente de la extensión.
• popup.js: Este script maneja la lógica de la ventana emergente de la extensión.
• options.html: Este archivo define la interfaz de usuario de la página de opciones de la extensión.
• options.js: Este script maneja la lógica de la página de opciones de la extensión.
• iconos: Estos son los iconos que se utilizan para representar la extensión en la barra de herramientas del navegador y en la página de gestión de extensiones.

Creación de su primera extensión: "¡Hola, mundo!"

Creemos una sencilla extensión "¡Hola, mundo!" para demostrar los principios básicos del desarrollo de extensiones de navegador.

1. Cree un archivo de manifiesto (manifest.json)

Cree un archivo llamado `manifest.json` en un nuevo directorio y agregue el siguiente código:

{
  "manifest_version": 3,
  "name": "¡Hola, Mundo!",
  "version": "1.0",
  "description": "Una sencilla extensión ¡Hola, Mundo!",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Explicación:

• `manifest_version`: Especifica la versión del archivo manifest (3 para Manifest V3).
• `name`: El nombre de la extensión.
• `version`: El número de versión de la extensión.
• `description`: Una breve descripción de la extensión.
• `permissions`: Una matriz de permisos que requiere la extensión (por ejemplo, "storage").
• `action`: Define las propiedades de la ventana emergente de la extensión, incluido el archivo emergente predeterminado y los iconos.
• `icons`: Especifica las rutas a los iconos de la extensión.

2. Cree un archivo emergente (popup.html)

Cree un archivo llamado `popup.html` en el mismo directorio y agregue el siguiente código:

  
  


  
¡Hola, Mundo!
  
Esta es una sencilla extensión de navegador.

Este archivo define la interfaz de usuario de la ventana emergente de la extensión, que mostrará el mensaje "¡Hola, mundo!".

3. Cree imágenes de iconos

Cree tres imágenes de iconos con los siguientes tamaños: 16x16, 48x48 y 128x128 píxeles. Guárdelas como `icon16.png`, `icon48.png` e `icon128.png` en un directorio `images` dentro de su directorio de extensión.

4. Cargue la extensión en su navegador

Chrome:

1. Abra Chrome y vaya a `chrome://extensions`.
2. Habilite el "Modo desarrollador" en la esquina superior derecha.
3. Haga clic en "Cargar descomprimido" y seleccione el directorio que contiene los archivos de su extensión.

Firefox:

1. Abra Firefox y vaya a `about:debugging#/runtime/this-firefox`.
2. Haga clic en "Cargar complemento temporalmente..." y seleccione el archivo `manifest.json`.

Su extensión "¡Hola, Mundo!" ahora debería estar instalada y visible en la barra de herramientas del navegador. Haga clic en el icono de la extensión para abrir la ventana emergente y ver el mensaje "¡Hola, Mundo!".

Trabajar con APIs de JavaScript

Las extensiones de navegador pueden interactuar con el navegador y las páginas web mediante las APIs de JavaScript. Estas APIs brindan acceso a varias funcionalidades, como:

• API de pestañas: Le permite administrar las pestañas del navegador, incluida la creación, actualización y consulta de pestañas.
• API de almacenamiento: Proporciona una forma de almacenar y recuperar datos de forma persistente dentro de la extensión.
• API de alarmas: Le permite programar tareas para que se ejecuten en momentos específicos.
• API de notificaciones: Le permite mostrar notificaciones al usuario.
• API de menús contextuales: Le permite agregar elementos personalizados al menú contextual del navegador (menú del botón derecho).
• API de solicitud web (Solicitud de red declarativa en Manifest V3): Le permite interceptar y modificar las solicitudes de red.
• API de scripting: Permite inyectar scripts en las páginas web.

Ejemplo: Uso de la API de almacenamiento

Creemos una extensión que almacene y recupere el nombre de un usuario usando la API de almacenamiento.

1. Actualice el archivo Manifest (manifest.json)

Asegúrese de que la matriz `permissions` en su `manifest.json` incluya "storage":

{
  "manifest_version": 3,
  "name": "Ejemplo de almacenamiento",
  "version": "1.0",
  "description": "Una extensión que usa la API de almacenamiento",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Cree un archivo emergente (popup.html)

Cree o actualice su `popup.html` con el siguiente contenido:

  
  


  
Ejemplo de almacenamiento
  Ingrese su nombre:
  
  Guardar
  

  

3. Cree un script emergente (popup.js)

Cree un archivo llamado `popup.js` y agregue el siguiente código:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // Cargar el nombre guardado del almacenamiento
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Hola, ${data.name}!`;
    }
  });

  // Guardar el nombre en el almacenamiento cuando se hace clic en el botón
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Hola, ${name}!`;
    });
  });
});

Explicación:

• El script escucha el evento `DOMContentLoaded` para asegurarse de que el DOM esté completamente cargado antes de ejecutar el código.
• Recupera referencias al campo de entrada, el botón de guardar y el párrafo de saludo.
• Carga el nombre guardado del almacenamiento usando `chrome.storage.sync.get()`.
• Guarda el nombre en el almacenamiento cuando se hace clic en el botón guardar usando `chrome.storage.sync.set()`.
• Actualiza el párrafo de saludo con el nombre guardado o ingresado.

Vuelva a cargar la extensión en su navegador. Ahora, cuando abra la ventana emergente, puede ingresar su nombre, guardarlo y ver el mensaje de saludo. El nombre se guardará en el almacenamiento de la extensión y se cargará la próxima vez que abra la ventana emergente.

Ejemplo: Uso de la API de pestañas

Creemos una extensión que muestre la URL de la pestaña actual en una ventana emergente.

1. Actualice el archivo Manifest (manifest.json)

Agregue el permiso "tabs" a la matriz `permissions` en su `manifest.json`:

{
  "manifest_version": 3,
  "name": "Ejemplo de pestañas",
  "version": "1.0",
  "description": "Una extensión que usa la API de pestañas",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Cree un archivo emergente (popup.html)

Cree o actualice su `popup.html` con el siguiente contenido:

  
  


  
Ejemplo de pestañas
  
URL de la pestaña actual:
  

  

3. Cree un script emergente (popup.js)

Cree un archivo llamado `popup.js` y agregue el siguiente código:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // Obtener la URL de la pestaña actual
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

Explicación:

• El script escucha el evento `DOMContentLoaded`.
• Utiliza `chrome.tabs.query()` para obtener la pestaña actualmente activa en la ventana actual.
• Recupera la URL de la pestaña y la muestra en el párrafo `url`.

Vuelva a cargar la extensión en su navegador. Ahora, cuando abra la ventana emergente, mostrará la URL de la pestaña actual.

Scripts en segundo plano y service workers

En Manifest V3, los scripts en segundo plano se reemplazan con service workers. Los service workers son scripts controlados por eventos que se ejecutan en segundo plano sin requerir una página persistente. Son más eficientes y menos intensivos en recursos que las páginas en segundo plano.

Características clave de los service workers:

• Controlado por eventos: Los service workers responden a eventos como acciones del navegador, alarmas y mensajes de los scripts de contenido.
• Asíncrono: Los service workers utilizan APIs asíncronas para evitar bloquear el hilo principal.
• Terminan cuando están inactivos: Los service workers terminan cuando no están manejando activamente eventos, conservando recursos.

Ejemplo: Uso de un service worker

Creemos una extensión que muestre una notificación cuando se inicia el navegador.

1. Actualice el archivo Manifest (manifest.json)

Actualice su `manifest.json` con el siguiente contenido:

{
  "manifest_version": 3,
  "name": "Ejemplo de Service Worker",
  "version": "1.0",
  "description": "Una extensión que usa un service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Explicación:

• La propiedad `"background"` especifica la ruta al script del service worker (`background.js`).
• La matriz `"permissions"` incluye `"notifications"`, que es necesario para mostrar notificaciones.

2. Cree un script de service worker (background.js)

Cree un archivo llamado `background.js` y agregue el siguiente código:

chrome.runtime.onStartup.addListener(() => {
  // Mostrar una notificación cuando se inicia el navegador
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Navegador iniciado',
    message: 'El navegador se ha iniciado.',
  });
});

Explicación:

• El script escucha el evento `chrome.runtime.onStartup`, que se activa cuando se inicia el navegador.
• Utiliza `chrome.notifications.create()` para mostrar una notificación con las propiedades especificadas.

Vuelva a cargar la extensión en su navegador. Ahora, cuando reinicie su navegador, debería ver una notificación de la extensión.

Scripts de contenido

Los scripts de contenido son archivos JavaScript que se ejecutan en el contexto de las páginas web. Pueden acceder y modificar el DOM de las páginas web, lo que le permite personalizar el comportamiento y la apariencia de los sitios web.

Características clave de los scripts de contenido:

• Acceso al DOM: Los scripts de contenido pueden acceder y manipular el DOM de las páginas web.
• Aislamiento de los scripts de la página web: Los scripts de contenido se ejecutan en un entorno aislado, lo que evita conflictos con los scripts de la página web.
• Comunicación con los scripts en segundo plano: Los scripts de contenido pueden comunicarse con los scripts en segundo plano mediante el paso de mensajes.

Ejemplo: Uso de un script de contenido

Creemos una extensión que cambie el color de fondo de las páginas web a azul claro.

1. Actualice el archivo Manifest (manifest.json)

Actualice su `manifest.json` con el siguiente contenido:

{
  "manifest_version": 3,
  "name": "Ejemplo de script de contenido",
  "version": "1.0",
  "description": "Una extensión que usa un script de contenido",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Explicación:

• La propiedad `"content_scripts"` especifica una matriz de scripts de contenido para ser inyectados en las páginas web.
• `"matches"` especifica las URL en las que se debe inyectar el script de contenido (`` coincide con todas las URL).
• `"js"` especifica la ruta al script de contenido (`content.js`).
• La matriz `"permissions"` incluye `"activeTab"` y `"scripting"`, que son necesarios para inyectar scripts.

2. Cree un script de contenido (content.js)

Cree un archivo llamado `content.js` y agregue el siguiente código:

document.body.style.backgroundColor = 'lightblue';

3. Cree un service worker (background.js)

Cree un archivo llamado `background.js` y agregue el siguiente código:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

Explicación:

• El script de contenido simplemente establece el color de fondo del elemento `body` en azul claro.
• El service worker escucha el evento de clic y ejecuta una función dentro de la pestaña actual, que cambia el color de fondo.

Vuelva a cargar la extensión en su navegador. Ahora, cuando abra cualquier página web, el color de fondo será azul claro.

Depuración de extensiones de navegador

La depuración de las extensiones de navegador es una parte esencial del proceso de desarrollo. Chrome y Firefox proporcionan excelentes herramientas de desarrollo para depurar extensiones.

Depuración en Chrome:

1. Abra Chrome y vaya a `chrome://extensions`.
2. Habilite el "Modo desarrollador" en la esquina superior derecha.
3. Haga clic en "Inspeccionar vistas de la página de fondo" para su extensión. Esto abrirá las Chrome DevTools para el script en segundo plano.
4. Para depurar los scripts de contenido, abra la página web donde se inyecta el script de contenido y luego abra las Chrome DevTools para esa página. Debería ver su script de contenido en el panel "Fuentes".

Depuración en Firefox:

1. Abra Firefox y vaya a `about:debugging#/runtime/this-firefox`.
2. Encuentre su extensión en la lista y haga clic en "Inspeccionar". Esto abrirá las Firefox Developer Tools para la extensión.
3. Para depurar los scripts de contenido, abra la página web donde se inyecta el script de contenido y luego abra las Firefox Developer Tools para esa página. Debería ver su script de contenido en el panel "Depurador".

Técnicas de depuración comunes:

• Registro de la consola: Utilice `console.log()` para imprimir mensajes en la consola.
• Puntos de interrupción: Establezca puntos de interrupción en su código para pausar la ejecución e inspeccionar variables.
• Mapas de origen: Utilice mapas de origen para depurar su código en su forma original, incluso si se ha minificado o transpuesto.
• Manejo de errores: Implemente el manejo de errores para detectar y registrar errores.

Publicación de su extensión

Una vez que haya desarrollado y probado su extensión, puede publicarla en Chrome Web Store o en el mercado de complementos de Firefox.

Publicación en Chrome Web Store:

1. Cree una cuenta de desarrollador en Chrome Web Store.
2. Empaquete su extensión en un archivo `.zip`.
3. Cargue el archivo `.zip` en Chrome Web Store.
4. Proporcione los metadatos requeridos, como el nombre, la descripción y las capturas de pantalla de la extensión.
5. Envíe su extensión para su revisión.

Publicación en el mercado de complementos de Firefox:

1. Cree una cuenta de desarrollador en el mercado de complementos de Firefox.
2. Empaquete su extensión en un archivo `.zip`.
3. Cargue el archivo `.zip` en el mercado de complementos de Firefox.
4. Proporcione los metadatos requeridos, como el nombre, la descripción y las capturas de pantalla de la extensión.
5. Envíe su extensión para su revisión.

Mejores prácticas para la publicación:

• Escriba una descripción clara y concisa de su extensión.
• Proporcione capturas de pantalla y videos de alta calidad para mostrar las características de su extensión.
• Pruebe su extensión a fondo antes de enviarla.
• Responda con prontitud a las revisiones y los comentarios de los usuarios.
• Mantenga su extensión actualizada con las últimas versiones del navegador y los parches de seguridad.

Consideraciones de seguridad

La seguridad es un aspecto crítico del desarrollo de extensiones de navegador. Las extensiones pueden acceder potencialmente a datos confidenciales del usuario y modificar el contenido de las páginas web, por lo que es esencial seguir las mejores prácticas de seguridad para proteger a los usuarios del código malicioso.

Consideraciones de seguridad clave:

• Minimizar los permisos: Solo solicite los permisos que realmente necesita su extensión.
• Validar la entrada del usuario: Sanitize y valide toda la entrada del usuario para evitar ataques de secuencias de comandos en sitios cruzados (XSS).
• Usar HTTPS: Siempre use HTTPS para comunicarse con servidores remotos.
• Política de seguridad de contenido (CSP): Aplique un CSP estricto para evitar la ejecución de código arbitrario.
• Actualice regularmente su extensión: Mantenga su extensión actualizada con los últimos parches de seguridad.

Siguiendo estas pautas de seguridad, puede ayudar a garantizar que su extensión de navegador sea segura para los usuarios.

Conclusión

El desarrollo de extensiones de navegador con Manifest V3 y las APIs de JavaScript ofrece una forma poderosa de personalizar la experiencia de navegación y agregar nuevas funciones a los navegadores web. Al comprender los conceptos clave, las APIs y las mejores prácticas descritas en esta guía, puede crear extensiones potentes y seguras que mejoren la productividad, mejoren la seguridad y brinden una mejor experiencia de navegación para los usuarios de todo el mundo. A medida que la web continúa evolucionando, las extensiones de navegador desempeñarán un papel cada vez más importante en la configuración del futuro de las interacciones en línea. Aproveche las oportunidades presentadas por Manifest V3 y la gran cantidad de APIs de JavaScript para crear extensiones innovadoras y valiosas.