Cómo hacer la transición a Manifest V3 para extensiones de Chrome

Si bien no soy un programador habitual de extensiones de Chrome, ciertamente he codificado suficientes extensiones y tengo una cartera de desarrollo web lo suficientemente amplia como para saber cómo solucionar la tarea. Sin embargo, recientemente, un cliente rechazó una de mis extensiones porque recibí comentarios de que mi extensión estaba "obsoleta".

Mientras luchaba por descubrir qué estaba mal, barrí mi vergüenza debajo de la alfombra e inmediatamente comencé a sumergirme profundamente en el mundo de Chrome Extensions. Desafortunadamente, la información sobre Manifest V3 era escasa y me resultó difícil entender rápidamente de qué se trataba esta transición.

No hace falta decir que, con un trabajo pendiente, tuve que navegar minuciosamente por mi camino Documentación para desarrolladores de Chrome de Google y resolver las cosas por mí mismo. Mientras hacía el trabajo, no quería que mi conocimiento e investigación en esta área se desperdiciaran y decidí compartir lo que desearía haber tenido fácil acceso en mi viaje de aprendizaje.

Por qué es importante la transición al Manifiesto 3

Manifest V3 es una API que Google utilizará en su navegador Chrome. Es el sucesor de la API actual, Manifest V2, y rige la forma en que las extensiones de Chrome interactúan con el navegador. Manifest V3 introduce cambios significativos en las reglas para las extensiones, algunos de los cuales serán el nuevo pilar de V2 al que estábamos acostumbrados.

La transición al Manifiesto V3 se puede resumir así:

1. La transición ha estado en curso desde 2018.
2. Manifest V3 comenzará a implementarse oficialmente en enero de 2023.
3. Para junio de 2023, las extensiones que ejecutan Manifest V2 ya no estarán disponibles en Chrome Web Store.
4. Las extensiones que no cumplan con las nuevas reglas introducidas en Manifest V3 eventualmente se eliminarán de Chrome Web Store.

Uno de los objetivos principales de Manifest V3 es hacer que los usuarios estén más seguros y mejorar la experiencia general del navegador. Anteriormente, muchas extensiones de navegador dependían de código en la nube, lo que significaba que podía ser difícil evaluar si una extensión era arriesgada. Manifest V3 tiene como objetivo abordar esto al exigir que las extensiones contengan todo el código que ejecutarán, lo que permite que Google las escanee y detecte riesgos potenciales. También obliga a las extensiones a solicitar permiso a Google para los cambios que pueden implementar en el navegador.

Es importante mantenerse actualizado con la transición de Google a Manifest V3 porque introduce nuevas reglas para las extensiones que tienen como objetivo mejorar la seguridad del usuario y la experiencia general del navegador, y las extensiones que no cumplan con estas reglas eventualmente se eliminarán de Chrome Web. Tienda.

En resumen, todo su arduo trabajo en la creación de extensiones que usaron Manifest V2 podría ser en vano si no realiza esta transición en los próximos meses.

Las diferencias clave entre Manifest V2 y V3

Hay muchas diferencias entre los dos, y aunque le recomiendo que lea sobre Guía de "Migración a Manifest V3" de Chrome, aquí hay un breve y dulce resumen de los puntos clave:

1. Trabajadores de servicios reemplazar las páginas de fondo en Manifest V3.
2. La modificación de la solicitud de red se maneja con el nuevo declarativeNetRequest API en Manifiesto V3.
3. En Manifest V3, las extensiones solo pueden ejecutar JavaScript incluido en su paquete y no pueden usar código alojado de forma remota.
4. Manifiesto V3 presenta promise compatibilidad con muchos métodos, aunque las devoluciones de llamada todavía se admiten como alternativa.
5. Los permisos de host en Manifest V3 son un elemento separado y deben especificarse en el "host_permissions" campo.
6. La política de seguridad de contenido en Manifest V3 es un objeto con miembros que representan contextos de política de seguridad de contenido (CSP) alternativos, en lugar de una cadena como lo era en Manifest V2.

En un Manifiesto de extensión de Chrome simple que altera el fondo de una página web, podría verse así:

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

Si encuentra que algunas de las etiquetas anteriores le parecen extrañas, siga leyendo para descubrir exactamente lo que necesita saber.

Cómo hacer una transición sin problemas a Manifest V3

He resumido la transición a Manifest V3 en cuatro áreas clave. Por supuesto, si bien hay muchas campanas y silbatos en el nuevo Manifiesto V3 que deben implementarse desde el antiguo Manifiesto V2, la implementación de cambios en estas cuatro áreas hará que su extensión de Chrome esté en el camino correcto para la transición final.

Las cuatro áreas clave son:

1. Actualización de la estructura básica de su Manifiesto.
2. Modifique sus permisos de anfitrión.
3. Actualice la política de seguridad de contenido.
4. Modifique su gestión de solicitudes de red.

Con estas cuatro áreas, los fundamentos de su Manifiesto estarán listos para la transición a Manifiesto V3. Analicemos cada uno de estos aspectos clave en detalle y veamos cómo podemos trabajar para preparar su extensión de Chrome para el futuro a partir de esta transición.

Actualización de la estructura básica de su Manifiesto

Actualizar la estructura básica de su manifiesto es el primer paso en la transición a Manifest V3. El cambio más importante que necesitará hacer es cambiar el valor de la "manifest_version" elemento para 3, que determina que está utilizando el conjunto de características de Manifest V3.

Una de las principales diferencias entre Manifest V2 y V3 es el reemplazo de las páginas de fondo con un solo trabajador de servicio de extensión en Manifest V3. Necesitará registrar al trabajador de servicio bajo el "background" campo, usando el "service_worker" key y especifique un único archivo JavaScript. Aunque Manifest V3 no admite múltiples secuencias de comandos en segundo plano, opcionalmente puede declarar el trabajador del servicio como un módulo ES especificando "type": "module", que le permite importar más código.

En el Manifiesto V3, el "browser_action" y "page_action" las propiedades se unifican en una sola "action" propiedad. Deberá reemplazar estas propiedades con "action" en tu manifiesto. Del mismo modo, el "chrome.browserAction" y "chrome.pageAction" Las API se unifican en una única API de "Acción" en Manifest V3, y deberá migrar a esta API.

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

En general, actualizar la estructura básica de su manifiesto es un paso crucial en el proceso de transición a Manifest V3, ya que le permite aprovechar las nuevas funciones y los cambios introducidos en esta versión de la API.

Modifique sus permisos de host

El segundo paso en la transición a Manifest V3 es modificar los permisos de su host. En Manifest V2, especifica permisos de host en el "permissions" campo en el archivo de manifiesto. En Manifest V3, los permisos de host son un elemento separado y debe especificarlos en el "host_permissions" campo en el archivo de manifiesto.

Aquí hay un ejemplo de cómo modificar sus permisos de host:

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

Actualizar la política de seguridad de contenido

Para actualizar el CSP de su extensión Manifest V2 para que cumpla con Manifest V3, deberá realizar algunos cambios en su archivo de manifiesto. En Manifest V2, el CSP se especificó como una cadena en el "content_security_policy" campo del manifiesto.

En Manifest V3, el CSP ahora es un objeto con diferentes miembros que representan contextos CSP alternativos. en lugar de un solo "content_security_policy" campo, ahora tendrá que especificar campos separados para "content_security_policy.extension_pages" y "content_security_policy.sandbox", según el tipo de páginas de extensión que esté utilizando.

También debe eliminar cualquier referencia a dominios externos en el "script-src", "worker-src", "object-src"y "style-src" directivas si están presentes. Es importante realizar estas actualizaciones en su CSP para garantizar la seguridad y la estabilidad de su extensión en Manifest V3.

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

Modifique su gestión de solicitudes de red

El paso final en la transición a Manifest V3 es modificar el manejo de solicitudes de red. En Manifest V2, habría utilizado el chrome.webRequest API para modificar solicitudes de red. Sin embargo, esta API se reemplaza en Manifest V3 por el declarativeNetRequest API.

Para utilizar esta nueva API, deberá especificar el declarativeNetRequest permiso en su manifiesto y actualice su código para usar la nueva API. Una diferencia clave entre las dos API es que el declarativeNetRequest La API requiere que especifique una lista de direcciones predeterminadas para bloquear, en lugar de poder bloquear categorías completas de solicitudes HTTP como podría hacerlo con el chrome.webRequest API.

Es importante realizar estos cambios en su código para asegurarse de que su extensión continúe funcionando correctamente en el Manifiesto V3. Aquí hay un ejemplo de cómo modificaría su manifiesto para usar el declarativeNetRequest API en Manifiesto V3:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

También necesitará actualizar su código de extensión para usar el declarativeNetRequest API en lugar de la chrome.webRequest API.

Otros aspectos que debes revisar

Lo que he cubierto es solo la punta del iceberg. Por supuesto, si quisiera cubrir todo, podría estar aquí por días y no tendría sentido tener las guías para desarrolladores de Chrome de Google. Si bien lo que cubrí lo tendrá lo suficientemente preparado para el futuro como para armar sus extensiones de Chrome en esta transición, aquí hay algunas otras cosas que tal vez desee ver para asegurarse de que sus extensiones funcionen en la parte superior de su juego.

• Migración de scripts en segundo plano al contexto de ejecución del trabajador del servicio: Como se mencionó anteriormente, Manifest V3 reemplaza las páginas de fondo con un trabajador de servicio de extensión único, por lo que puede ser necesario actualizar los scripts de fondo para adaptarse al contexto de ejecución del trabajador de servicio.
• Unificando el **chrome.browserAction** y **chrome.pageAction** APIs: Estas dos API equivalentes se unifican en una sola API en Manifest V3, por lo que puede ser necesario migrar a Action API.
• Migración de funciones que esperan un contexto de fondo de Manifest V2: La adopción de trabajadores de servicios en Manifest V3 no es compatible con métodos como chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()y chrome.extension.getViews(). Puede ser necesario migrar a un diseño que pase mensajes entre otros contextos y el trabajador del servicio en segundo plano.
• Mover solicitudes de CORS en scripts de contenido al trabajador de servicio en segundo plano: Puede ser necesario mover las solicitudes de CORS en scripts de contenido al trabajador de servicio en segundo plano para cumplir con el Manifiesto V3.
• Migración para dejar de ejecutar código externo o cadenas arbitrarias: Manifest V3 ya no permite la ejecución de lógica externa usando chrome.scripting.executeScript({code: '...'}), eval()y new Function(). Puede ser necesario mover todo el código externo (JavaScript, WebAssembly, CSS) al paquete de extensión, actualizar el script y las referencias de estilo para cargar recursos del paquete de extensión y usar chrome.runtime.getURL() para crear direcciones URL de recursos en tiempo de ejecución.
• Actualización de ciertas secuencias de comandos y métodos CSS en Tabs API: Como se mencionó anteriormente, varios métodos pasan de la API de pestañas a la API de secuencias de comandos en Manifest V3. Puede ser necesario actualizar cualquier llamada a estos métodos para usar la API Manifest V3 correcta.

¡Y muchos más!

Siéntase libre de tomarse un tiempo para ponerse al día sobre todos los cambios. Después de todo, este cambio es inevitable y si no desea que sus extensiones de Manifest V2 se pierdan por evitar esta transición, dedique un tiempo a armarse con el conocimiento necesario.

Por otro lado, si eres nuevo en la programación de extensiones de Chrome y buscas comenzar, una excelente manera de hacerlo es sumergirte en el mundo de las herramientas para desarrolladores web de Chrome. Lo hice a través de un curso sobre Aprendizaje Linkedin, que me puso al día con bastante rapidez. Una vez que tenga ese conocimiento básico, regrese a este artículo y traduzca lo que sabe a Manifest V3.

Entonces, ¿cómo utilizaré las funciones del nuevo Manifiesto V3 en el futuro?

Bueno, para mí, la transición a Manifest V3 y la eliminación del chrome.webRequest La API parece estar cambiando las extensiones de los casos de uso centrados en datos (como los bloqueadores de anuncios) a usos más funcionales y basados ​​en aplicaciones. Últimamente me he mantenido alejado del desarrollo de aplicaciones, ya que puede volverse bastante muchos recursos a veces. Sin embargo, ¡este cambio podría ser lo que me trae de vuelta!

El auge de las herramientas de IA en los últimos tiempos, muchas con API disponibles para usar, ha generado toneladas de aplicaciones SaaS nuevas y frescas. Personalmente, creo que llega en un momento perfecto con el cambio a más extensiones de Chrome basadas en aplicaciones. Si bien muchas de las extensiones más antiguas pueden desaparecer de esta transición, muchas de las nuevas creadas en torno a ideas novedosas de SaaS ocuparán su lugar.

¡Por lo tanto, esta es una actualización emocionante para subir y renovar extensiones antiguas o crear otras nuevas! Personalmente, veo muchas posibilidades en el uso de API que involucran el uso de IA en extensiones para mejorar la experiencia de navegación del usuario. Pero eso es realmente solo la punta del iceberg. Si está buscando realmente meterse en cosas con sus propias extensiones profesionales o comunicarse con empresas para crear/actualizar extensiones para ellas, le recomendaría actualizar su cuenta de Gmail por los beneficios que brinda en colaboración, desarrollo y publicación de extensiones para Chrome Web Store.

Sin embargo, recuerde que los requisitos de cada desarrollador son diferentes, así que aprenda lo que necesita para mantener a flote sus extensiones actuales o las nuevas.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/