Actualizar una extensión de Chrome de Manifest V2 a Manifest V3 es un paso fundamental para los desarrolladores, ya que Google ha eliminado gradualmente el soporte para Manifest V2. En este artículo, recorreremos el proceso de actualización de una extensión Pomodoro Timer, originalmente creada con Manifest V2, al nuevo estándar Manifest V3.

mi historia

Tenía una extensión Pomodoro Timer que creé hace 4 años de forma gratuita y recibí una notificación de Google de que necesitaba actualizar Manifest.

¿La versión original de mi Pomodoro Timer fue algo que diseñé yo mismo, con un rugido de T-Rex como notificación de fin de ciclo? Fue peculiar y divertido, incluso me sorprendió ver a 24 personas usándolo.

Esto es lo que parecía:

Mi esposa recientemente comenzó a aprender diseño y como necesito actualizar Manifest, le pedí que renovara el diseño. El resultado está al final del artículo. Spoiler: Creo que resultó genial.

¿Por qué actualizar a Manifest V3?

Manifest V3 introduce varios cambios clave destinados a mejorar la privacidad, la seguridad y el rendimiento en las extensiones de Chrome. Estos cambios incluyen:

• Trabajadores de servicio: Las páginas de fondo se reemplazan con trabajadores de servicio, que son más eficientes porque no se ejecutan continuamente.
• Seguridad mejorada: Alcances de permisos reducidos e introducción de la API declarativaNetRequest para gestionar solicitudes de red.
• Rendimiento mejorado: Al optimizar la forma en que las extensiones interactúan con los recursos del navegador, V3 garantiza una mejor gestión de los recursos.

Paso 1: comprender las diferencias fundamentales

Antes de profundizar en la actualización, es importante comprender los cambios clave entre Manifest V2 y V3:

1. Scripts en segundo plano: En V2, los scripts en segundo plano se ejecutaban continuamente. En V3, estos se reemplazan con trabajadores de servicio que se ejecutan solo cuando es necesario.
2. Permisos: Manifest V3 requiere una declaración explícita de todos los permisos, y ciertos permisos han quedado obsoletos o reemplazados.
3. Cambios de API: Algunas API se han eliminado o reemplazado y se ha actualizado el sistema de mensajería entre los diferentes componentes de la extensión.

Paso 2: actualizar el archivo de manifiesto

Así es como actualizarías el archivo manifest.json de V2 a V3 para una extensión Pomodoro Timer:

Ejemplo de manifiesto original V2:

{
  "name": "Pomodoro Clock",
  "version": "1.1.0",
  "description": "Simple background timer for productivity",
  "manifest_version": 2,
  "permissions": ["storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "options_page": "options.html"
}

Ejemplo de manifiesto V3 actualizado:

{
  "name": "Pomodoro Timer & Focus Clock",
  "version": "2.0.1",
  "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.",
  "manifest_version": 3,
  "permissions": ["storage","notifications","alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Cambios clave en el manifiesto:

Secuencia de comandos de fondo:

• V2: "fondo": {"scripts": ["fondo.js"]}
• V3: "antecedentes": {"service_worker": "antecedentes.js"}

En V3, los scripts en segundo plano se reemplazan con trabajadores de servicio. Los trabajadores del servicio solo funcionan cuando es necesario, lo que mejora la eficiencia de los recursos.

Acción frente a acción del navegador:

• V2: "acción_navegador": { ... }
• V3: "acción": { ... }

browser_action ha sido reemplazada por action, lo que consolida la funcionalidad y simplifica el manifiesto.

Paso 3: Actualización del script en segundo plano para utilizar trabajadores de servicio

Mi extensión usó un setInterval() simple en segundo plano, con el trabajador de servicio este comportamiento no funcionará, porque para ahorrar recursos del navegador se ejecuta solo cuando es necesario.

En mi caso tuve que modificar el temporizador y almacenar la marca de tiempo en el almacenamiento, usar alarmas para programar la ejecución del código de activación de la notificación de la persona que llama.

Y, por supuesto, usé las notificaciones integradas de Chrome para enviar notificaciones y deshacernos del molesto t-rex trasero. Si los primeros usuarios de mi extensión me leen, ¿realmente lo lamento?

No habrá un ejemplo de código aquí porque es demasiado específico.

Conclusión

Aquí está el resultado. Creo que es genial. Minimalista y fácil de usar

La actualización no fue tan difícil, lo principal es comprender la diferencia entre un script de fondo antiguo y un trabajador de servicio, pero tenga cuidado con las alarmas, ¿incluso logré bloquear Chrome un par de veces durante la prueba?

¡No dudes en probar la extensión Pomodoro Timer & Focus Clock actualizada y buena suerte actualizando la tuya!