Actions des extensions dans Manifest V3

Simeon Vincent
Simeon Vincent

Depuis le lancement des extensions Chrome, la plate-forme permet aux développeurs d'exposer les directement dans l'interface utilisateur Chrome de premier niveau à l'aide d'actions. Une action est un bouton d'icône qui peut ouvrir un pop-up ou déclencher certaines fonctionnalités dans l'extension. Auparavant, Chrome prenait en charge deux les types d'actions, les actions du navigateur et les actions sur la page ; Manifest V3 a changé cela en consolidant ses dans une nouvelle API chrome.action.

Bref historique des actions des extensions

Bien que chrome.action soit nouveau dans Manifest V3, la fonctionnalité de base qu'il fournit remonte à que les extensions sont devenues stables, en janvier 2010. La première écurie version de la plate-forme d'extensions Chrome proposait deux types d'actions différents: le navigateur actions et actions sur la page.

Les actions du navigateur ont permis aux développeurs d'extensions d'afficher une icône "dans la barre d'outils principale de Google Chrome, à droite de la barre d'adresse" (source) et fourni aux utilisateurs un moyen simple pour déclencher des fonctionnalités d'extension sur n'importe quelle page. Les actions sur la page, en revanche, avaient pour but "représentent les actions qui peuvent être effectuées sur la page active, mais qui ne s'appliquent pas à toutes les pages" (source).

Une action sur la page (à gauche) s'affiche dans l'omnibox, indiquant que l'extension peut effectuer une action sur cette page. Une action du navigateur (à droite) est toujours visible.

En d'autres termes, les actions du navigateur donnaient aux développeurs d'extensions une surface d'UI persistante dans le navigateur alors que les actions sur la page n'apparaissaient que lorsque l'extension pouvait effectuer une action utile sur la page actuelle.

Ces deux types d'actions étant facultatifs, les développeurs d'extensions peuvent choisir de ne pas fournir une action sur une page ou un navigateur (vous n'êtes pas autorisé à spécifier plusieurs actions).

Près de six ans plus tard, Chrome 49 a introduit un nouveau paradigme d'interface utilisateur pour les extensions. Afin de vous aider les extensions qu'ils disposaient, Chrome a commencé à afficher toutes les extensions actives à droite de l'omnibox. Les utilisateurs pourraient « dépassement » extensions dans le menu Chrome s'ils le souhaitent.

Les icônes des extensions masquées apparaissent dans le menu Chrome.

Cette mise à jour a permis l'affichage d'une icône pour chaque extension et a introduit deux modifications importantes dans le comportement des extensions dans l'UI de Chrome. Tout d'abord, toutes les extensions ont commencé à afficher des icônes dans la barre d'outils. Si l'extension ne possédait pas d'icône, Chrome en génère une automatiquement. Deuxièmement, les actions sur la page déplacées dans la barre d'outils avec les actions du navigateur et ont reçu une affordance pour différencier entre leur "émission" et "masquer" différents états.

Une action de page désactivée (à gauche) affiche une image en nuances de gris dans la barre d'outils, tandis qu'une action activée (à droite) s'affiche en couleur.

Ce changement a permis aux extensions d'action sur la page de continuer à fonctionner comme prévu, mais a aussi diminué le rôle des actions sur la page au fil du temps. L'un des effets de cette refonte de l'interface utilisateur a été que les actions sur la page les actions des navigateurs. Comme toutes les extensions apparaissaient dans la barre d'outils, les utilisateurs s'attendre à ce qu'un clic sur l'icône de la barre d'outils d'une extension déclenche l'appel de l'extension, et des actions du navigateur est devenu une interaction de plus en plus importante pour les extensions Chrome.

Modifications apportées à Manifest V3

L'UI et les extensions de Chrome ont continué d'évoluer au fil des années suivant l'édition 2016 de l'UI des extensions. refonte, mais les actions du navigateur et celles sur les pages sont restées presque inchangées. C'est-à-dire, au moins jusqu'à nous avons commencé à planifier la modernisation de la plate-forme d'extensions avec Manifest V3.

L'équipe en charge des extensions a compris que les actions du navigateur et des pages étaient de plus en plus distinction sans signification. Pire encore, leurs légères différences de comportement empêchaient les développeurs déterminer laquelle utiliser. Nous avons réalisé que nous pouvions résoudre ces problèmes en combinant le navigateur et l'action sur la page en une seule "action".

Entrez dans l'API Action. chrome.action est très semblable à chrome.browserAction, mais il présente quelques différences notables.

Tout d'abord, chrome.action introduit une nouvelle méthode nommée getUserSettings(). Cette méthode permet aux développeurs d'extensions de vérifier si l'utilisateur a épinglé l'action de leur extension dans la barre d'outils.

let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);

"getUserSettings" peut sembler un nom inhabituel pour cette fonctionnalité par rapport, par exemple, "isPinned", mais l'historique des actions dans Chrome montre que l'UI du navigateur change plus rapidement que les API d'extension. L'objectif de cette API est donc d'exposer les préférences utilisateur liées aux actions des interfaces génériques afin de limiter la perte d'API par la suite. Il permet également aux autres fournisseurs de navigateurs les concepts d'interface utilisateur spécifiques au navigateur dans l'objet UserSettings renvoyé par ce .

Deuxièmement, l'icône et l'état activé/désactivé de l'action d'une extension peuvent être contrôlés à l'aide de la API Declarative Content API. C'est important, car cela permet aux extensions de réagir à la navigation de l'utilisateur sans accéder au contenu ni même aux URL des pages qu'il visite. Par exemple, voir comment une extension peut activer son action lorsque l'utilisateur visite des pages du site example.com.

// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostSuffix: '.example.com'},
          })
        ],
        actions: [new chrome.declarativeContent.ShowAction()]
      }
    ]);
  });
});

Le code ci-dessus est presque identique à ce que ferait une extension avec une action sur la page. La seule différence est que dans Manifest V3, nous avons utilisé declarativeContent.ShowAction au lieu de declarativeContent.ShowPageAction dans Manifest V2.

Enfin, les bloqueurs de contenu peuvent utiliser l'API déclarativeNetRequest setExtensionActionOptions) pour afficher le nombre de de requêtes bloquées par l'extension pour un onglet donné. Cette fonctionnalité est importante, car elle permet des bloqueurs de contenu pour tenir les utilisateurs finaux informés sans exposer des métadonnées de navigation potentiellement sensibles. à l'extension.

Conclusion

La modernisation de la plate-forme d'extensions Chrome était l'une de nos principales motivations pour Manifest V3. Dans de nombreuses qui impliquaient de passer à de nouvelles technologies, mais aussi de simplifier la surface de nos API ; c'est notre objectif ici.

J'espère que cet article a permis de mettre en lumière cet aspect particulier de la plate-forme Manifest V3. À découvrez comment l'équipe Chrome aborde l'avenir des extensions de navigateur, consultez la Pages Vision de la plate-forme et Présentation de Manifest V3 dans notre pour les développeurs. Vous pouvez également discuter des extensions Chrome avec d'autres développeurs sur le chromium-extensions.