Cómo cambiar a Manifesto V3 para Chrome Extensions | trucos CSS

Si bien no soy un desarrollador habitual de extensiones de Chrome, ciertamente he codificado suficientes extensiones y tengo una cartera de desarrollo web lo suficientemente amplia como para estar a la altura de la tarea. Sin embargo, hace poco un cliente rechazó una de mis extensiones porque recibí comentarios de que mi extensión estaba "desactualizada".

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 comprender rápidamente de qué se trataba esta transición.

No hace falta decir que, con el trabajo pendiente, tuve que encontrar mi camino a fondo. Documentación de Google para desarrolladores de Chrome Mientras hacía el trabajo, no quería que mi conocimiento e investigación en este campo se desperdiciaran y decidí compartir lo que desearía tener fácil acceso durante mis estudios.

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

Manifest V3 es la 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 de extensión, 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 como:

1. La transición ha estado en curso desde 2018.
2. Manifest V3 comenzará a distribuirse oficialmente en enero de 2023.
3. Para junio de 2023, las extensiones que implementan 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 se basaban en código en la nube, lo que significaba que podía ser difícil evaluar si la prórroga era arriesgadaManifest 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 pedir permiso a Google para los cambios que pueden implementar en el navegador.

Es importante mantenerse al día 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 la red de Chrome Store.

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

Las principales diferencias entre Manifest V2 y V3

Hay muchas diferencias entre los dos y aunque recomiendo leer Guía de Chrome "Migrar a Manifest V3".aquí hay un breve y dulce resumen de los puntos clave:

1. Los trabajadores de servicio reemplazan las páginas de fondo en Manifest V3.
2. La modificación de la solicitud de red se procesa con la nueva declarativeNetRequest API en manifiesto V3.
3. En Manifest V3, las extensiones solo pueden ejecutar JavaScript que está incluido en su paquete y no pueden usar código alojado de forma remota.
4. Manifiesto V3 presenta promise soporte para 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 el Manifiesto V3 es un objeto con miembros que representan contextos alternativos de la Política de seguridad de contenido (CSP), en lugar de una cadena como lo era en el Manifiesto V2.

En un manifiesto simple para una extensión de Chrome que cambia 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 averiguar 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 ventajas 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é encaminada para la transición final.

Las cuatro áreas clave son:

1. Actualización de la estructura básica de su manifiesto.
2. Cambie sus permisos de anfitrión.
3. Actualice sus políticas de seguridad de contenido.
4. Cambiar el procesamiento de su solicitud de red.

Con estas cuatro áreas, las bases de su manifiesto estarán listas para la transición al 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 un manifiesto V3. El cambio más importante que se debe hacer es cambiar el valor de "manifest_version" elemento a 3que especifica 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 trabajador de extensión de servicio único en Manifest V3. Deberá registrar al trabajador de servicio en "background" campo usando "service_worker" key y establecer un único archivo JavaScript. Aunque Manifest V3 no admite múltiples secuencias de comandos en segundo plano, puede declarar el servicio como un módulo ES opcionalmente especificando "type": "module"que le permite importar código adicional.

En Manifiesto V3, "browser_action" y "page_action" Las propiedades se combinan en una "action" Deberá reemplazar estas propiedades con "action" en tu manifiesto. Similarmente, "chrome.browserAction" y "chrome.pageAction" Las API se han consolidado 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 central de su manifiesto es un paso crucial en el proceso de transición del manifiesto V3, ya que le permite aprovechar las nuevas funciones y los cambios introducidos en esta versión de la API.

Cambia tus permisos de host

El segundo paso para migrar a Manifest V3 es cambiar los permisos de su host. En Manifest V2, especifica permisos de host en el "permissions" 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 cambiar los permisos de su anfitrión:

// 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": [ 
  ":///*" 
]

Actualice sus políticas de seguridad de contenido

Para actualizar el CSP de su extensión Manifest V2 para que sea compatible 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 manifiesto.

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

También debe eliminar todas las referencias a dominios externos en el "script-src", "worker-src", "object-src"y "style-src" directivas si están disponibles. 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'"

Cambiar el manejo de solicitudes de red

El paso final en la transición a Manifest V3 es cambiar el manejo de solicitudes de red. En Manifest V2 usarías chrome.webRequest API para modificar solicitudes de red. Sin embargo, esta API ha sido reemplazada en Manifest V3 por declarativeNetRequest API.

Para utilizar esta nueva API, deberá especificar declarativeNetRequest permiso en su manifiesto y actualice su código para usar la nueva API. Una diferencia clave entre las dos API es que declarativeNetRequest La API requiere que especifique una lista de direcciones predefinidas para bloquear, en lugar de poder bloquear categorías completas de solicitudes HTTP como podría hacerlo con 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 declarativeNetRequest API en el manifiesto V3:

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

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

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

Otros aspectos a revisar

Lo que he cubierto es solo la punta del iceberg. Por supuesto, si quisiera cubrir todo, podría estar aquí durante días y no tendría sentido tener las guías para desarrolladores de Chrome de Google. Si bien lo que he cubierto lo tendrá lo suficientemente preparado para el futuro como para habilitar sus extensiones de Chrome en esta transición, aquí hay algunas otras cosas que quizás desee analizar para asegurarse de que sus extensiones funcionen a la perfección.

• Migre los 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 solo trabajador de servicio de extensión, por lo que es posible que sea necesario actualizar los scripts de fondo para adaptarse al contexto de ejecución del trabajador de servicio.
• Fusión de **chrome.browserAction** y **chrome.pageAction** API: Estas dos API equivalentes se fusionaron en una sola API en Manifest V3, por lo que es posible que deba migrar a Action API.
• Migración de funciones que esperan un contexto de fondo de Manifest V2: Aceptar trabajadores de servicio 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.
• Mueva las solicitudes de CORS en scripts de contenido al trabajador de servicio en segundo plano: Es posible que deba mover las solicitudes de CORS en las secuencias de comandos de contenido al trabajador de servicio en segundo plano para cumplir con el Manifiesto V3.
• Migrar desde la ejecución de 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().Es posible que deba 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.
• Actualice ciertos métodos de secuencias de comandos y CSS en la API de pestañas: Como se mencionó anteriormente, se están moviendo varios métodos de la API de pestañas a la API de secuencias de comandos en Manifest V3. Es posible que deba actualizar cualquier llamada a estos métodos para usar la API Manifest V3 correcta.

¡Y muchos otros!

Siéntase libre de tomarse un momento para familiarizarse con todos los cambios. Después de todo, este cambio es inevitable, y si no desea que sus extensiones de Manifest V2 se pierdan al 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 quieres comenzar, una excelente manera de hacerlo es sumergirte en el mundo de las herramientas de desarrollo web de Chrome. Lo hice a través de un curso de Formación en Linkedinlo que me puso al día bastante rápido. Una vez que tenga este conocimiento básico, vuelva 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 alejando 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 un poco muchos recursos sin embargo, ¡a veces este cambio puede ser lo que me hace retroceder!

El reciente auge de las herramientas de inteligencia artificial, muchas con API accesibles, ha generado toneladas de aplicaciones SaaS nuevas y frescas. Personalmente, creo que llega en el momento perfecto con el cambio a más extensiones de Chrome basadas en aplicaciones. Si bien es posible que muchas de las extensiones más antiguas se eliminen de esta transición, muchas nuevas creadas en torno a nuevas ideas de SaaS ocuparán su lugar.

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

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