Extensiones de Chrome: Extensión de la API para admitir la navegación instantánea

Dave Tapuska
Dave Tapuska

Resumen: La API de Extensions se actualizó para admitir la memoria caché atrás/adelante, la precarga de navegaciones. Consulta la siguiente información para obtener más detalles.

Chrome se esforzó mucho para que la navegación fuera rápida. Navegación instantánea tecnologías como Memoria caché atrás/adelante (enviado por computadora en Chrome 96) y las Reglas de especulación (enviados en Chrome 103) para mejorar tanto el retroceso como el futuro. una experiencia fluida a los desarrolladores. En esta publicación, exploraremos las actualizaciones que implementamos en el navegador. de extensiones de aplicación para adaptarse a estos nuevos flujos de trabajo.

Comprender los tipos de páginas

Antes de la introducción de la Memoria caché atrás/adelante y la renderización previa, una persona solo tenía una página activa. Esta siempre era la que estaba visible. Si un el usuario regresa a la página anterior, se destruiría la página activa (página B) y la página anterior de la historia se reconstruyería por completo (página A). Las extensiones no necesitaban preocuparse por la parte de las páginas del ciclo de vida porque solo había una por cada pestaña: el estado activo/visible.

Expulsión de la página activa
Expulsión de la página activa.

Con la Memoria caché atrás/adelante y la renderización previa, ya no hay un contacto uno a uno relación entre pestañas y páginas. Ahora, cada pestaña en realidad almacena las páginas y las páginas cambian de estado en lugar de ser destruidas y reconstruida.

Por ejemplo, una página podría comenzar su vida útil como una página renderizada previamente (no visible). pasar a una página activa (visible) cuando el usuario hace clic en un vínculo y, luego, almacenar en la Memoria caché atrás/adelante (no visible) cuando el usuario navega a otra página, todo sin que la página se destruya. Más adelante en este artículo veremos las nuevas propiedades expuestas para ayudar a que las extensiones entiendan qué las páginas de estado.

Tipos de páginas
Tipos de páginas.

Ten en cuenta que una pestaña puede tener una serie de páginas renderizadas previamente (no solo una), una única activa (visible) y una serie de páginas almacenadas en caché atrás/adelante.

¿Qué cambiará para los desarrolladores de extensiones?

ID de marco == 0

En Chromium, nos referimos al marco superior o principal como el marco más externo.

Autores de la extensión que suponen el frameId del fotograma más externo es 0 (una práctica recomendada anterior) puede tener problemas. Ya que una pestaña ahora puede tener múltiples fotogramas más externos (prerrenderizados y almacenados en caché páginas), la suposición de que hay un único espacio marco de una pestaña es incorrecto. frameId == 0 seguirá representando el marco más externo de la página activa, pero los marcos más externos de otras páginas en la misma pestaña no serán cero. El nuevo campo frameType para solucionar este problema. Consulta la sección "¿Cómo determino si un fotograma es el más externo?" de esta publicación.

Ciclo de vida de los marcos en comparación con los documentos

Otro concepto problemático en relación con las extensiones es el ciclo de vida de las extensiones marco. Un marco aloja un documento (que está asociado con una URL confirmada). El documento puede cambiar (por ejemplo, navegando), pero el frameId no lo hará, por lo que es difícil asociar que algo ocurrió en un documento específico con solo frameIds. Presentamos un concepto de documentId que es un identificador único para cada documento. Si se navega por un fotograma y abre un documento nuevo y cambiará el identificador. Este campo es útil determinar cuándo las páginas cambian su estado de ciclo de vida (entre prerender/active/cached) porque permanece igual.

Eventos de navegación web

Eventos en el espacio de nombres chrome.webNavigation puede activarse varias veces en el en la misma página según el ciclo de vida en el que se encuentre. Consulta "¿Cómo puedo saber en qué ciclo de vida se encuentra la página?" y "¿Cómo determino la transición de una página?".

¿Cómo puedo saber en qué ciclo de vida se encuentra la página?

La DocumentLifecycle se agregó a varias APIs de extensiones en las que frameId se disponibles anteriormente. Si el tipo DocumentLifecycle está presente en un evento (como onCommitted), su valor es el estado en el que se generó el evento. Siempre puedes consultar información de WebNavigation getFrame() y getAllFrames() aunque siempre se prefiere el valor del evento. Si utilizas Sin importar el método, el estado del fotograma puede cambiar entre el momento en el que y cuando se resuelven las promesas que devuelven ambos métodos.

La DocumentLifecycle tiene los siguientes valores:

  • "prerender pulgadas : Actualmente no se presenta al usuario, pero se está preparando para mostrárselo.
  • "active": Actualmente se muestra al usuario.
  • "cached": Se almacena en la Memoria caché atrás/adelante.
  • "pending_deletion": El documento se está destruyendo.

¿Cómo puedo determinar si un fotograma es el más externo?

Anteriormente, es posible que las extensiones hubieran comprobado si frameId == 0 determinaba si el evento que ocurre es para el fotograma más externo o no. Con varias páginas En una pestaña, ahora tenemos varios marcos más externos, por lo que la definición de frameId es problemática. Nunca recibirás eventos relacionados con una Memoria caché atrás/adelante marco. Sin embargo, para los fotogramas renderizados previamente, se usará frameId. distinto de cero para el fotograma más externo. Por lo tanto, si usas frameId == 0 como indicador determinar si el marco más externo es incorrecto.

Para ayudar con esto, presentamos un nuevo tipo llamado FrameType así que ahora es fácil determinar si el marco es el más externo. FrameType tiene los siguientes valores:

  • "outermost_frame": Por lo general, se lo denomina marco superior. Ten en cuenta que hay múltiplos de ellos. Por ejemplo, si tienes una configuración páginas, cada una tiene un marco externo que podría llamarse su marco superior.
  • "fenced_frame": Reservado para uso futuro.
  • "sub_frame": Por lo general, es un iframe.

Podemos combinar DocumentLifecycle con FrameType y determinar si un fotograma es el marco más externo activo. Por ejemplo: tab.documentLifecycle === “active” && frameType === “outermost_frame”

¿Cómo resuelvo los problemas de tiempo de uso con los fotogramas?

Como dijimos antes, un marco aloja un documento y el marco puede navegar a un nuevo documento, pero frameId no cambiará. Esto crea problemas cuando recibir un evento con solo un frameId. Si buscas la URL del fotograma, puede ser diferente de cuando ocurrió el evento, esto se denomina un problema de tiempo de uso.

Para solucionarlo, presentamos documentId. (y parentDocumentId). La clase webNavigation.getFrame() ahora hace que frameId sea opcional si se proporciona un documentId. El documentId cambiará cada vez que se navegue por un fotograma.

¿Cómo determino la transición de una página?

Existen indicadores explícitos para determinar cuándo una página pasa de un estado a otro.

Analicemos los eventos WebNavigation.

Para una primera navegación por cualquier página, verás cuatro eventos en ese orden. que se enumeran a continuación. Ten en cuenta que estos cuatro eventos pueden ocurrir con el El estado DocumentLifecycle es "prerender" o "active".

onBeforeNavigate
onCommitted
onDOMContentLoaded
onCompleted

Esto se ilustra en el siguiente diagrama, en el que se muestra el cambio de documentId a "xyz" cuando la página renderizada previamente se convierte en la página activa.

El documentId cambia cuando la página renderizada previamente se convierte en la página activa
El elemento documentId cambia cuando la página renderizada previamente se convierte en página activa.

Cuando una página pasa de la Memoria caché atrás/adelante o la renderización previa a la habrá tres eventos más (pero con DocumentLifecyle es "active").

onBeforeNavigate
onCommitted
onCompleted

El documentId se mantendrá igual que en los eventos originales. Este es (como se muestra arriba, cuando se activa documentId == xyz). Ten en cuenta que se activan los mismos eventos de navegación, excepto por onDOMContentLoaded. porque la página ya se cargó.

Si tienes alguna pregunta o comentario, no dudes en preguntar en la extensiones de cromo grupo.