La versión 1 del manifiesto dejó de estar disponible en Chrome 18 y se eliminará gradualmente la compatibilidad según el programa de asistencia para la versión 1 del manifiesto. Los cambios de la versión 1 a la versión 2 son inferiores a dos categorías amplias: cambios en la API y cambios en la seguridad.
Este documento ofrece listas de tareas para migrar las extensiones de Chrome de la versión 1 del manifiesto a versión 2, seguida de resúmenes más detallados de lo que significan estos cambios y por qué se implementaron.
Lista de tareas de cambios en la API
¿Estás usando la propiedad
browser_actions
o la API dechrome.browserActions
?Reemplaza
browser_actions
por la propiedadbrowser_action
singular.Reemplaza
chrome.browserActions
porchrome.browserAction
.Reemplaza la propiedad
icons
pordefault_icon
.Reemplaza la propiedad
name
pordefault_title
.Reemplaza la propiedad
popup
pordefault_popup
(y ahora debe ser una cadena).¿Estás usando la propiedad
page_actions
o la API dechrome.pageActions
?Reemplaza
page_actions
porpage_action
.Reemplaza
chrome.pageActions
porchrome.pageAction
.Reemplaza la propiedad
icons
pordefault_icon
.Reemplaza la propiedad
name
pordefault_title
.Reemplaza la propiedad
popup
pordefault_popup
(y ahora debe ser una cadena).¿Estás usando la propiedad
chrome.self
?Reemplázala por
chrome.extension
.¿Estás usando la propiedad
Port.tab
?Reemplázala por
Port.sender
.¿Estás usando
chrome.extension.getTabContentses()
o ¿Necesitaschrome.extension.getExtensionTabs()
APIs?Reemplázala por
chrome.extension.getViews( { "type" : "tab" } )
.¿Tu extensión usa una página en segundo plano?
Reemplaza la propiedad
background_page
por una propiedadbackground
.Agrega una propiedad
scripts
opage
que contenga el código de la página.Agrega una propiedad
persistent
y establécela enfalse
para convertir tu página en segundo plano en un evento. página
Lista de tareas de cambios de seguridad
¿Usas bloques de secuencias de comandos intercalados en páginas HTML?
Quita el código JS contenido entre las etiquetas
<script>
y colócalo en un archivo JS externo.¿Usas controladores de eventos intercalados (como "onClick", etcétera)?
Quítalas del código HTML, muévelas 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 forma opcional, un 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 usan
eval()
, los nuevosFunction()
,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 para la zona de pruebas en tu manifiesto y ejecuta el código afectado en la zona de pruebas mediante
postMessage()
para comunicarse con la página de la zona de pruebas¿Estás cargando un código externo, como jQuery o Google Analytics?
Considera descargar la biblioteca, 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 “content_security_policy” parte de tu .
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 página, y reemplaza entre algunas APIs antiguas por otras nuevas.
Cambios en las acciones del navegador
La API de acciones del navegador presenta algunos cambios en los nombres:
- Las propiedades
browser_actions
ychrome.browserActions
se reemplazaron por su los equivalentes únicosbrowser_action
ychrome.browserAction
. En la propiedad
browser_actions
anterior, había propiedadesicons
,name
ypopup
. Estos se reemplazaron por los siguientes:default_icon
para el ícono de la insignia de acción del navegadordefault_name
para el texto que aparece en el cuadro de información cuando colocas el cursor sobre la insigniadefault_popup
para la página HTML que representa la IU para la acción del navegador (y esto ahora debe ser una cadena, no puede ser un objeto)
Cambios en las acciones de la página
Al igual que con los cambios en las acciones del navegador, la API de acciones de la página también cambió:
- Las propiedades
page_actions
ychrome.pageActions
se reemplazaron por su singular los equivalentespage_action
ychrome.pageAction
. En la propiedad
page_actions
anterior, había propiedadesicons
,name
ypopup
. Estos se reemplazaron pordefault_icon
para el ícono de insignia de acción de la páginadefault_name
para el texto que aparece en el cuadro de información cuando colocas el cursor sobre la insigniadefault_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 que se quitaron y cambiaron
Se quitaron algunas APIs de extensión y se reemplazaron por nuevas equivalentes:
- La propiedad
background_page
se reemplazó por background. - Se quitó la propiedad
chrome.self
; usachrome.extension
. - Se reemplazó la propiedad
Port.tab
porPort.sender
. - Las APIs de
chrome.extension.getTabContentses()
ychrome.extension.getExtensionTabs()
tienen se reemplazó porchrome.extension.getViews( { "type" : "tab" } )
.
Resumen de los cambios de seguridad
El cambio de la versión 1 del manifiesto a la versión 2. Muchos de estos cambios son producto de la adopción de Chrome de la Política de Seguridad del Contenido. tú deberías leer más sobre esta política para comprender sus implicaciones.
No se permiten los controladores de eventos ni las secuencias de comandos intercaladas
Debido al uso de la Política de Seguridad del Contenido, ya no puedes usar etiquetas <script>
intercaladas.
con el contenido HTML. Estos se deben mover a archivos JS externos. Además, los controladores de eventos intercalados
tampoco se admiten. Por ejemplo, supongamos que tienes el siguiente código en tu extensión:
<html>
<head>
<script>
function myFunc() { ... }
</script>
</head>
</html>
Este código causaría un error durante el tiempo de ejecución. Para solucionar este problema, mueve el contenido de la etiqueta <script>
a archivos externos
y hacer referencia a ellos con un atributo src='path_to_file.js'
.
De forma similar, los controladores de eventos intercalados, que son una función común y conveniente que usan muchos desarrolladores web, no los ejecutarán. Por ejemplo, considera instancias comunes como las siguientes:
<body onload="initialize()">
<button onclick="handleClick()" id="button1">
No funcionarán en las extensiones de Manifest V2. Quita los controladores de eventos intercalados y colócalos en la
a un archivo JS externo y usa addEventListener()
para registrar controladores de eventos para ellos. Para
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 lenguaje de marcado de la interfaz de usuario.
Incorporación de contenido
En algunas situaciones, tu extensión podría incorporar contenido que puede usarse de forma externa o provenga de una fuente externa.
Contenido de extensiones en páginas web: Si tu extensión incorpora recursos (como imágenes, secuencias de comandos, estilos de CSS, etc.) que se usan en el contenido de comandos inyectadas en páginas web, debes usar la propiedad web_accessible_resources agregar estos recursos a la lista de entidades permitidas para 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 evita que los atacantes externos ingresen código desconocido a tu extensión. Sin embargo, existen horarios en los que deseas cargar recursos entregados de manera externa, como código de jQuery o Google Analytics. Existen dos maneras de hacerlo:
- Descarga la biblioteca relevante de forma local (como jQuery) y compártela con tu extensión.
Puedes relajar la CSP de forma limitada incluyendo en la lista de entidades permitidas los orígenes HTTPS "content_security_policy" de tu manifiesto. Para incluir una biblioteca como Google Analytics, este es el enfoque que se debe adoptar:
{ ..., "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 mayores cambios
en el nuevo esquema de Manifest V2
Usa técnicas de evaluación de secuencias de comandos dinámicas, como eval()
o Function()
nuevas, o pasa cadenas de JS.
código a funciones que harán que se use un eval()
, como setTimeout()
Además,
las bibliotecas de JavaScript de uso general, como Google Maps y ciertas bibliotecas de plantillas, se conocen
algunas de estas técnicas.
Chrome proporciona una zona de pruebas para que las páginas se ejecuten en su propio origen, a las que se les deniega el acceso a Chrome.*
APIs Para usar eval()
y elementos similares según la nueva Política de Seguridad del Contenido, debes hacer lo siguiente:
- Crea una entrada para la zona de pruebas en tu archivo de manifiesto.
- En la entrada de la zona de pruebas, enumera las páginas que deseas ejecutar en la zona de pruebas.
- Usa el paso de mensajes a través de
postMessage()
para comunicarte con la página de la zona de pruebas.
Para obtener más detalles sobre cómo hacerlo, consulta la documentación de Eval de la zona de pruebas.
Lecturas adicionales
Los cambios en la versión 2 del manifiesto están diseñados para guiar a los desarrolladores hacia la compilación con extensiones y apps con arquitectura sólida. Para ver una lista completa de los cambios en 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 el código no seguro, lee el artículo sobre la evaluación de la zona de pruebas. Obtén más información sobre Contenido Política de seguridad, visita nuestro tutorial relacionado con las extensiones y una buena introducción sobre HTML5Rocks