Instructivo: Migra a Manifest V2

La versión 1 del manifiesto dejó de estar disponible en Chrome 18 y la compatibilidad se eliminará gradualmente según el programa de compatibilidad de la versión 1 del manifiesto. Los cambios de la versión 1 a la versión 2 se dividen en dos categorías principales: cambios en la API y cambios de seguridad.

En este documento, se proporcionan listas de tareas para migrar tus extensiones de Chrome de la versión 1 del manifiesto a la versión 2, seguidas de resúmenes más detallados sobre el significado de estos cambios y por qué se realizaron.

Lista de tareas de cambios en la API

  • ¿Estás usando la propiedad browser_actions o la API de chrome.browserActions?

  • Reemplaza browser_actions por la propiedad browser_action singular.

  • Reemplaza chrome.browserActions por chrome.browserAction.

  • Reemplaza la propiedad icons por default_icon.

  • Reemplaza la propiedad name por default_title.

  • Reemplaza la propiedad popup por default_popup (y ahora debe ser una cadena).

  • ¿Estás usando la propiedad page_actions o la API de chrome.pageActions?

  • Reemplaza page_actions por page_action.

  • Reemplaza chrome.pageActions por chrome.pageAction.

  • Reemplaza la propiedad icons por default_icon.

  • Reemplaza la propiedad name por default_title.

  • Reemplaza la propiedad popup por default_popup (y ahora debe ser una cadena).

  • ¿Estás usando la propiedad chrome.self?

  • Se reemplazó por chrome.extension.

  • ¿Estás usando la propiedad Port.tab?

  • Se reemplazó por Port.sender.

  • ¿Estás usando las APIs de chrome.extension.getTabContentses() o chrome.extension.getExtensionTabs()?

  • Se reemplazó por chrome.extension.getViews( { "type" : "tab" } ).

  • ¿Tu extensión usa una página en segundo plano?

  • Reemplaza la propiedad background_page por una propiedad background.

  • Agrega una propiedad scripts o page que contenga el código de la página.

  • Agrega una propiedad persistent y configúrala como false para convertir tu página en segundo plano en una página de evento.

Lista de tareas de los cambios de seguridad

  • ¿Estás usando bloques de secuencias de comandos intercaladas en las páginas HTML?

  • Quita el código JS contenido en las etiquetas <script> y colócalo en un archivo JS externo.

  • ¿Estás usando controladores de eventos intercalados (como onclick, etc.)?

  • Quítalos del código HTML, muévelos a un archivo JS externo y usa addEventListener() en su lugar.

  • ¿Tu extensión inserta secuencias de comandos de contenido en páginas web que necesitan acceder a recursos (como imágenes y secuencias de comandos) que se encuentran en el paquete de la extensión?

  • Define la propiedad web_accessible_resources y enumera los recursos (y, de manera opcional, una política de seguridad del contenido independiente para esos recursos).

  • ¿Tu extensión incorpora páginas web externas?

  • Define la propiedad sandbox.

  • ¿Tu código o biblioteca usa eval(), Function() nuevo, innerHTML, setTimeout() o, de lo contrario, pasa cadenas de código JS que se evalúan de forma dinámica?

  • Usa JSON.parse() si analizas código JSON en un objeto.

  • Usa una biblioteca compatible con CSP, por ejemplo, AngularJS.

  • Crea una entrada de zona de pruebas en tu manifiesto y ejecuta el código afectado en la zona de pruebas. Para ello, usa postMessage() para comunicarte con la página de zona de pruebas.

  • ¿Estás cargando código externo, como jQuery o Google Analytics?

  • Considera descargar la biblioteca y empaquetarla en tu extensión y, luego, cargarla desde el paquete local.

  • Incluye en la lista de entidades permitidas el dominio HTTPS que entrega el recurso en la parte "content_security_policy" de tu manifiesto.

Resumen de los cambios en la API

La versión 2 del manifiesto presenta algunos cambios en las APIs de acción del navegador y de acción de la página, y reemplaza algunas APIs anteriores por otras más recientes.

Cambios en las acciones del navegador

La API de acciones del navegador presenta algunos cambios de nombre:

  • Las propiedades browser_actions y chrome.browserActions se reemplazaron por sus contrapartes únicas browser_action y chrome.browserAction.
  • En la propiedad browser_actions anterior, había propiedades icons, name y popup. Se reemplazaron por lo siguiente:

  • default_icon para el ícono de la insignia de la acción del navegador

  • default_name para el texto que aparece en la información sobre herramientas cuando colocas el cursor sobre la insignia

  • default_popup para la página HTML que representa la IU de la acción del navegador (y ahora debe ser una cadena, no un objeto)

Cambios en las acciones de la página

Al igual que con los cambios en las acciones del navegador, la API de las acciones de página también cambió:

  • Las propiedades page_actions y chrome.pageActions se reemplazaron por sus contrapartes únicas page_action y chrome.pageAction.
  • En la propiedad page_actions anterior, había propiedades icons, name y popup. Estos se reemplazaron por lo siguiente:

  • default_icon para el ícono de la insignia de acción de la página

  • default_name para el texto que aparece en la información sobre herramientas cuando colocas el cursor sobre la insignia

  • default_popup para la página HTML que representa la IU de la acción de la página (y ahora debe ser una cadena, no puede ser un objeto)

APIs quitadas y modificadas

Se quitaron algunas APIs de extensión y se reemplazaron por sus contrapartes nuevas:

  • La propiedad background_page se reemplazó por background.
  • Se quitó la propiedad chrome.self; usa chrome.extension.
  • La propiedad Port.tab se reemplazó por Port.sender.
  • Las APIs de chrome.extension.getTabContentses() y chrome.extension.getExtensionTabs() se reemplazaron por chrome.extension.getViews( { "type" : "tab" } ).

Resumen de los cambios de seguridad

Hay varios cambios relacionados con la seguridad que acompañan el cambio de la versión 1 del manifiesto a la versión 2. Muchos de estos cambios se deben a la adopción de la Política de Seguridad del Contenido por parte de Chrome. Debes obtener más información sobre esta política para comprender sus implicaciones.

No se permiten secuencias de comandos intercaladas ni controladores de eventos

Debido al uso de la Política de Seguridad del Contenido, ya no puedes usar etiquetas <script> intercaladas con el contenido HTML. Se deben mover a archivos JS externos. Además, tampoco se admiten los controladores de eventos intercalados. Por ejemplo, supongamos que tienes el siguiente código en tu extensión:

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

Este código generaría un error durante el tiempo de ejecución. Para solucionar este problema, mueve el contenido de la etiqueta <script> a archivos externos y haz referencia a ellos con un atributo src='path_to_file.js'.

Del mismo modo, no se ejecutarán los controladores de eventos intercalados, que son una ocurrencia común y una función de conveniencia que usan muchos desarrolladores web. Por ejemplo, considera las siguientes instancias comunes:

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

No funcionarán en las extensiones de manifiesto V2. Quita los controladores de eventos intercalados, colócalos en tu archivo JS externo y usa addEventListener() para registrar controladores de eventos en su lugar. Por ejemplo, en tu código JS, usa lo siguiente:

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

Esta es una forma mucho más clara de separar el comportamiento de tu extensión del marcado de la interfaz de usuario.

Cómo incorporar contenido

En algunos casos, es posible que tu extensión incorpore contenido que se pueda usar de forma externa o provenga de una fuente externa.

Contenido de la extensión en páginas web: Si tu extensión incorpora recursos (como imágenes, secuencias de comandos, estilos CSS, etc.) que se usan en secuencias de comandos de contenido que se insertan en páginas web, debes usar la propiedad web_accessible_resources para incluir estos recursos en la lista de entidades permitidas, de modo que las páginas web externas puedan usarlos:

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

Incorporación de contenido externo: La política de seguridad del contenido solo permite que se carguen secuencias de comandos y objetos locales desde tu paquete, lo que prevente que los atacantes externos introduzcan código desconocido en tu extensión. Sin embargo, a veces, querrás cargar recursos entregados de forma externa, como jQuery o el código de Google Analytics. Existen dos maneras de hacerlo:

  1. Descarga la biblioteca relevante de forma local (como jQuery) y empaquetarla con tu extensión.
  2. Puedes relajar la CSP de forma limitada si agregas a la lista de entidades permitidas los orígenes HTTPS en la sección "content_security_policy" de tu manifiesto. Para incluir una biblioteca como Google Analytics, sigue este enfoque:

    {
      ...,
      "content_security_policy": "script-src 'self'
      https://ssl.google-analytics.com; object-src 'self'",
      ...
    }
    

Usa la evaluación de secuencias de comandos dinámicas

Quizás uno de los cambios más grandes en el nuevo esquema de manifiesto v2 es que las extensiones ya no pueden usar técnicas de evaluación de secuencias de comandos dinámicas, como eval() o Function() nuevas, ni pasar cadenas de código JS a funciones que causarán que se use un eval(), como setTimeout(). Además, se sabe que algunas bibliotecas de JavaScript de uso general, como Google Maps y ciertas bibliotecas de plantillas, usan algunas de estas técnicas.

Chrome proporciona una zona de pruebas para que las páginas se ejecuten en su propio origen, al que se les niega el acceso a Chrome.* APIs Para usar eval() y elementos similares en la nueva política de seguridad del contenido, haz lo siguiente:

  1. Crea una entrada de zona de pruebas en tu archivo de manifiesto.
  2. En la entrada de la zona de pruebas, enumera las páginas que deseas ejecutar en ella.
  3. Usa el pase de mensajes a través de postMessage() para comunicarte con la página en zona de pruebas.

Para obtener más detalles sobre cómo hacerlo, consulta la documentación de Sandboxing Eval.

Lecturas adicionales

Los cambios en la versión 2 del manifiesto están diseñados para guiar a los desarrolladores a crear apps y extensiones más seguras y con una arquitectura más sólida. Para ver una lista completa de los cambios de la versión 1 del manifiesto a la versión 2, consulta la documentación del archivo de manifiesto. Para obtener más información sobre el uso de la zona de pruebas para aislar código no seguro, lee el artículo evaluación de la zona de pruebas. Para obtener más información sobre la Política de Seguridad del Contenido, consulta nuestro instructivo sobre extensiones y una buena introducción en HTML5Rocks.