Extensions Chrome: API étendue pour prendre en charge la navigation instantanée

Dave Tapuska
Dave Tapuska

Résumé: L'API Extensions a été mise à jour pour prendre en charge le cache amélioré, le préchargement des navigations. Pour en savoir plus, reportez-vous aux informations ci-dessous.

Chrome met tout en œuvre pour accélérer la navigation. Navigation instantanée telles que le cache amélioré (expédié sur ordinateur dans Chrome 96) et les règles de spéculation (disponible dans Chrome 103) pour améliorer à la fois les changements et les changements à venir expérience. Dans cet article, nous allons passer en revue les modifications apportées au navigateur. des API d'extension pour s'adapter à ces nouveaux workflows.

Comprendre les types de pages

Avant l'introduction du cache amélioré et du prérendu, une personne ne comportait qu'une seule page active. C'était toujours celui qui était visible. Si un l'utilisateur revient à la page précédente, la page active est détruite (Page B). et la page précédente de l'historique serait entièrement reconstituée (Page A). Les extensions n'avaient pas à se soucier de la partie du cycle de vie car il n'y en avait qu'un pour un onglet, l'état actif/visible.

<ph type="x-smartling-placeholder">
</ph> Éviction de la page active
Éviction de la page active.

Avec le cache amélioré et le prérendu, il n'y a plus besoin entre les onglets et les pages. Chaque onglet stocke en fait plusieurs les pages et les pages peuvent passer d'un état à un autre au lieu d'être détruites reconstitué.

Par exemple, une page peut commencer sa vie en tant que page prérendue (non visible), passer à une page active (visible) lorsque l'utilisateur clique sur un lien, puis être stocké dans le cache amélioré (non visible) lorsque l'utilisateur accède à une autre page, sans qu'elle ne soit détruite. Plus loin dans cet article nous allons examiner les nouvelles propriétés présentées pour aider les extensions à comprendre les pages d'état.

<ph type="x-smartling-placeholder">
</ph> Types de page
Types de pages
:

Notez qu'un onglet peut contenir une série de pages prérendues (pas une seule), une seule active (visible) et une série de pages mises en cache précédentes et suivantes.

Qu'est-ce qui change pour les développeurs d'extensions ?

Identifiant frame == 0

Dans Chromium, le cadre supérieur/principal est le cadre le plus externe.

Auteurs d'extensions qui supposent le frameId du frame le plus externe est 0 (une bonne pratique précédente) peut poser des problèmes. Un onglet peut désormais comporter plusieurs cadres de plus haut niveau (prérendu et mis en cache) pages), l'hypothèse qu'il existe une seule couche le cadre d'un onglet est incorrect. frameId == 0 continuera de représenter le cadre le plus externe de la page active, mais les cadres les plus externes de autres pages du même onglet sont différentes de zéro. Un nouveau champ frameType contient ont été ajoutées pour résoudre ce problème. Consultez la section Comment déterminer si une image est la plus externe ? de ce post.

Cycle de vie des cadres par rapport aux documents

Un autre concept problématique avec les extensions est le cycle de vie cadre. Un cadre héberge un document (associé à une URL validée). Le document peut changer (en naviguant, par exemple), mais pas frameId. Il qu'un événement s'est produit dans un document spécifique frameIds uniquement. Nous ajoutons le concept de documentId. qui est un identifiant unique pour chaque document. Si l'on parcourt un cadre et ouvre un nouveau document dont l'identifiant sera modifié. Ce champ est utile pour déterminer à quel moment les pages changent d'état de cycle de vie (entre prérendu/actif/en cache), car il reste le même.

Événements de navigation sur le Web

Événements dans l'espace de noms chrome.webNavigation peut être déclenchée plusieurs fois sur la même longueur d’onde en fonction du cycle de vie dans lequel elle se trouve. Voir "Comment savoir dans quel cycle de vie se trouve la page ?" et Comment déterminer à quel moment une page effectue une transition ?.

Comment savoir dans quel cycle de vie se trouve la page ?

DocumentLifecycle a été ajouté à plusieurs API d'extensions, où frameId était déjà disponibles. Si le type DocumentLifecycle est présent dans un événement (par exemple, onCommitted). sa valeur est l'état dans lequel l'événement a été généré. Vous pouvez toujours interroger informations issues de l'WebNavigation getFrame() et getAllFrames() , mais il est toujours préférable d'utiliser la valeur de l'événement. Si vous utilisez les deux méthodes, sachez que l'état de l'image peut changer entre le moment où l'événement a été généré et quand les promesses renvoyées par les deux méthodes sont résolues.

DocumentLifecycle présente les valeurs suivantes:

  • "prerender pouces : la vidéo n'est pas actuellement présentée à l'utilisateur, mais est sur le point d'être présentée à l'utilisateur.
  • "active": présentation présentée à l'utilisateur.
  • "cached": stocké dans le cache amélioré.
  • "pending_deletion": le document est en cours de destruction.

Comment déterminer si une image est la plus externe ?

Auparavant, les extensions avaient peut-être vérifié si frameId == 0 pour déterminer si l'événement qui se produit concerne le frame le plus externe ou non. Avec plusieurs pages Dans un onglet, nous avons maintenant plusieurs frames les plus externes. La définition de frameId est problématique. Vous ne recevrez jamais d'événements concernant une mise en cache cadre. Toutefois, pour les frames prérendus, frameId sera non nulle pour la trame de plus haut niveau. L'utilisation de frameId == 0 comme signal déterminer s’il s’agit de la trame la plus externe est incorrecte.

Pour vous aider, nous avons lancé un nouveau type appelé FrameType Il est donc facile de déterminer si le cadre est effectivement le cadre le plus externe. FrameType a les valeurs suivantes:

  • "outermost_frame": généralement appelé cadre supérieur. Notez que il existe des multiples de ces valeurs. Par exemple, si vous disposez d'un modèle prérendu et mis en cache pages, chacune comporte un cadre externe qui pourrait être désigné par le terme "cadre supérieur".
  • "fenced_frame": réservé pour une utilisation ultérieure.
  • "sub_frame": il s'agit généralement d'un iFrame.

Nous pouvons combiner DocumentLifecycle avec FrameType et déterminer si une image est cadre le plus externe actif. Par exemple, tab.documentLifecycle === “active” && frameType === “outermost_frame”.

Comment résoudre les problèmes liés au temps d'utilisation avec les frames ?

Comme nous l'avons dit au-dessus, un cadre héberge un document et le cadre peut naviguer vers un nouveau document, mais frameId ne changera pas. Cela crée des problèmes lorsque vous reçoivent un événement avec seulement frameId. Si vous recherchez l'URL de l'image, il peut être différent du moment où l'événement s'est produit. C'est ce qu'on appelle un problème lié à l'heure d'utilisation.

Pour résoudre ce problème, nous avons lancé documentId (et parentDocumentId). La méthode webNavigation.getFrame() rend désormais frameId facultatif si un documentId est fourni. La documentId change à chaque navigation dans un cadre.

Comment déterminer à quel moment une page passe à la suivante ?

Des signaux explicites permettent de déterminer à quel moment une page passe d'un état à un autre.

Examinons les événements WebNavigation.

Pour la toute première navigation d'une page, vous verrez quatre événements dans l'ordre comme indiqué ci-dessous. Notez que ces quatre événements peuvent se produire lorsque L'état de DocumentLifecycle est "prerender" ou "active".

onBeforeNavigate
onCommitted
onDOMContentLoaded
onCompleted

Ceci est illustré dans le schéma ci-dessous, qui montre que documentId change sur "xyz" lorsque la page prérendue devient la page active.

<ph type="x-smartling-placeholder">
</ph> Le documentId change lorsque la page prérendue devient la page active.
La documentId change lorsque la page prérendue devient le page active.

Lorsqu'une page passe du cache amélioré ou du prérendu au actif, il y aura trois autres événements (mais avec DocumentLifecyle "active").

onBeforeNavigate
onCommitted
onCompleted

Le documentId restera le même que dans les événements d'origine. C'est comme illustré ci-dessus lorsque documentId == xyz s'active. Notez que les mêmes événements de navigation se déclenchent, sauf pour onDOMContentLoaded car la page a déjà été chargée.

Si vous avez des commentaires ou des questions, n'hésitez pas à les poser sur le chromium-extensions groupe.