Comment passer à Manifest V3 pour les extensions Chrome

Bien que je ne sois pas un programmeur d'extensions Chrome régulier, j'ai certainement codé suffisamment d'extensions et j'ai un portefeuille de développement Web suffisamment large pour maîtriser la tâche. Cependant, tout récemment, un client a rejeté l'une de mes extensions car j'ai reçu des commentaires indiquant que mon extension était "obsolète".

Alors que je me démenais pour comprendre ce qui n'allait pas, j'ai balayé mon embarras sous le tapis et j'ai immédiatement commencé ma plongée profonde dans le monde des extensions Chrome. Malheureusement, les informations sur Manifest V3 étaient rares et il m'était difficile de comprendre rapidement en quoi consistait cette transition.

Inutile de dire qu'avec un travail en attente, j'ai dû me frayer un chemin péniblement Documentation du développeur Chrome de Google et comprendre les choses par moi-même. Pendant que je faisais le travail, je ne voulais pas que mes connaissances et mes recherches dans ce domaine soient gaspillées et j'ai décidé de partager ce à quoi j'aurais aimé avoir facilement accès dans mon parcours d'apprentissage.

Pourquoi la transition vers le manifeste 3 est importante

Manifest V3 est une API que Google utilisera dans son navigateur Chrome. Il succède à l'API actuelle, Manifest V2, et régit la manière dont les extensions Chrome interagissent avec le navigateur. Manifest V3 introduit des changements significatifs dans les règles des extensions, dont certaines seront le nouveau pilier de la V2 auquel nous étions habitués.

La transition vers Manifest V3 peut se résumer ainsi :

1. La transition est en cours depuis 2018.
2. Manifest V3 commencera officiellement à être déployé en janvier 2023.
3. D'ici juin 2023, les extensions qui exécutent Manifest V2 ne seront plus disponibles sur le Chrome Web Store.
4. Les extensions qui ne respectent pas les nouvelles règles introduites dans Manifest V3 seront éventuellement supprimées du Chrome Web Store.

L'un des principaux objectifs de Manifest V3 est de rendre les utilisateurs plus sûrs et d'améliorer l'expérience globale du navigateur. Auparavant, de nombreuses extensions de navigateur s'appuyaient sur du code dans le cloud, ce qui signifiait qu'il pouvait être difficile de évaluer si une prolongation était risquée. Manifest V3 vise à résoudre ce problème en exigeant que les extensions contiennent tout le code qu'elles exécuteront, permettant à Google de les analyser et de détecter les risques potentiels. Cela oblige également les extensions à demander l'autorisation de Google pour les modifications qu'elles peuvent implémenter sur le navigateur.

Rester à jour avec la transition de Google vers Manifest V3 est important car il introduit de nouvelles règles pour les extensions qui visent à améliorer la sécurité des utilisateurs et l'expérience globale du navigateur, et les extensions qui ne respectent pas ces règles seront éventuellement supprimées du Web Chrome. Boutique.

En bref, tout votre travail acharné pour créer des extensions utilisant Manifest V2 pourrait être vain si vous ne faites pas cette transition dans les mois à venir.

Les principales différences entre Manifest V2 et V3

Il existe de nombreuses différences entre les deux, et bien que je vous recommande fortement de lire sur Guide "Migrer vers Manifest V3" de Chrome, voici un bref et doux résumé des points clés :

1. Employés de services remplacer les pages d'arrière-plan dans Manifest V3.
2. La modification des requêtes réseau est gérée avec le nouveau declarativeNetRequest API dans Manifest V3.
3. Dans Manifest V3, les extensions ne peuvent exécuter que le JavaScript inclus dans leur package et ne peuvent pas utiliser de code hébergé à distance.
4. Manifest V3 introduit promise prise en charge de nombreuses méthodes, bien que les rappels soient toujours pris en charge comme alternative.
5. Les autorisations d'hôte dans Manifest V3 sont un élément distinct et doivent être spécifiées dans le "host_permissions" champ.
6. La politique de sécurité du contenu dans Manifest V3 est un objet dont les membres représentent des contextes alternatifs de politique de sécurité du contenu (CSP), plutôt qu'une chaîne comme dans Manifest V2.

Dans un simple manifeste d'extension Chrome qui modifie l'arrière-plan d'une page Web, cela peut ressembler à ceci :

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

Si vous trouvez que certaines des balises ci-dessus vous semblent étrangères, continuez à lire pour savoir exactement ce que vous devez savoir.

Comment passer en douceur à Manifest V3

J'ai résumé la transition vers Manifest V3 dans quatre domaines clés. Bien sûr, bien qu'il y ait de nombreuses cloches et sifflets dans le nouveau Manifest V3 qui doivent être implémentés à partir de l'ancien Manifest V2, la mise en œuvre de modifications dans ces quatre domaines mettra votre extension Chrome sur la bonne voie pour la transition éventuelle.

Les quatre domaines clés sont :

1. Mettre à jour la structure de base de votre manifeste.
2. Modifiez les autorisations de votre hôte.
3. Mettez à jour la politique de sécurité du contenu.
4. Modifiez le traitement de vos requêtes réseau.

Avec ces quatre domaines, les fondamentaux de votre Manifest seront prêts pour la transition vers Manifest V3. Examinons en détail chacun de ces aspects clés et voyons comment nous pouvons travailler pour pérenniser votre extension Chrome à partir de cette transition.

Mettre à jour la structure de base de votre manifeste

La mise à jour de la structure de base de votre manifeste est la première étape de la transition vers Manifest V3. Le changement le plus important que vous devrez faire est de changer la valeur du "manifest_version" élément à 3, qui détermine que vous utilisez le jeu de fonctionnalités Manifest V3.

L'une des principales différences entre Manifest V2 et V3 est le remplacement des pages d'arrière-plan par un seul agent de service d'extension dans Manifest V3. Vous devrez inscrire le travailleur de service sous le "background" champ, en utilisant le "service_worker" clé et spécifiez un seul fichier JavaScript. Même si Manifest V3 ne prend pas en charge plusieurs scripts d'arrière-plan, vous pouvez éventuellement déclarer le service worker en tant que module ES en spécifiant "type": "module", ce qui vous permet d'importer du code supplémentaire.

Dans Manifest V3, le "browser_action" ainsi que "page_action" les propriétés sont unifiées en une seule "action" biens. Vous devrez remplacer ces propriétés par "action" dans votre manifeste. De même, le "chrome.browserAction" ainsi que "chrome.pageAction" Les API sont unifiées en une seule API "Action" dans Manifest V3, et vous devrez migrer vers cette API.

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

Dans l'ensemble, la mise à jour de la structure de base de votre manifeste est une étape cruciale dans le processus de transition vers Manifest V3, car elle vous permet de tirer parti des nouvelles fonctionnalités et des modifications introduites dans cette version de l'API.

Modifier les autorisations de votre hôte

La deuxième étape de la transition vers Manifest V3 consiste à modifier les autorisations de votre hôte. Dans Manifest V2, vous spécifiez les autorisations d'hôte dans le "permissions" champ dans le fichier manifeste. Dans Manifest V3, les autorisations d'hôte sont un élément distinct et vous devez les spécifier dans le "host_permissions" champ dans le fichier manifeste.

Voici un exemple de modification des autorisations de votre hôte :

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

Mettre à jour la politique de sécurité du contenu

Afin de mettre à jour le CSP de votre extension Manifest V2 pour qu'il soit conforme à Manifest V3, vous devrez apporter quelques modifications à votre fichier manifeste. Dans Manifest V2, le CSP était spécifié sous forme de chaîne dans le "content_security_policy" champ du manifeste.

Dans Manifest V3, le CSP est désormais un objet avec différents membres représentant des contextes CSP alternatifs. Au lieu d'un seul "content_security_policy" champ, vous devrez maintenant spécifier des champs séparés pour "content_security_policy.extension_pages" ainsi que "content_security_policy.sandbox", selon le type de pages d'extension que vous utilisez.

Vous devez également supprimer toute référence à des domaines externes dans le "script-src", "worker-src", "object-src"et "style-src" directives si elles sont présentes. Il est important d'effectuer ces mises à jour sur votre CSP afin d'assurer la sécurité et la stabilité de votre extension dans Manifest V3.

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

Modifier le traitement de vos requêtes réseau

La dernière étape de la transition vers Manifest V3 consiste à modifier la gestion de vos demandes réseau. Dans Manifest V2, vous auriez utilisé le chrome.webRequest API pour modifier les requêtes réseau. Cependant, cette API est remplacée dans Manifest V3 par le declarativeNetRequest API.

Pour utiliser cette nouvelle API, vous devrez spécifier le declarativeNetRequest autorisation dans votre manifeste et mettez à jour votre code pour utiliser la nouvelle API. Une différence clé entre les deux API est que le declarativeNetRequest L'API vous demande de spécifier une liste d'adresses prédéterminées à bloquer, plutôt que de pouvoir bloquer des catégories entières de requêtes HTTP comme vous le pourriez avec le chrome.webRequest API.

Il est important d'effectuer ces modifications dans votre code pour vous assurer que votre extension continue de fonctionner correctement sous Manifest V3. Voici un exemple de la façon dont vous modifieriez votre manifeste pour utiliser le declarativeNetRequest API dans Manifest V3 :

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

Vous devrez également mettre à jour votre code d'extension pour utiliser le declarativeNetRequest API au lieu de chrome.webRequest API.

Autres aspects que vous devez vérifier

Ce que j'ai couvert n'est que la pointe de l'iceberg. Bien sûr, si je voulais tout couvrir, je pourrais être ici pendant des jours et il ne servirait à rien d'avoir les guides des développeurs Chrome de Google. Bien que ce que j'ai couvert vous assurera une pérennité suffisante pour armer vos extensions Chrome dans cette transition, voici d'autres éléments que vous voudrez peut-être examiner pour vous assurer que vos extensions fonctionnent au sommet de leur art.

• Migrer les scripts d'arrière-plan vers le contexte d'exécution du service worker : Comme mentionné précédemment, Manifest V3 remplace les pages d'arrière-plan par un seul agent de service d'extension, il peut donc être nécessaire de mettre à jour les scripts d'arrière-plan pour s'adapter au contexte d'exécution de l'agent de service.
• Unifier le **chrome.browserAction** ainsi que **chrome.pageAction** Apis: Ces deux API équivalentes sont unifiées en une seule API dans Manifest V3, il peut donc être nécessaire de migrer vers l'API Action.
• Migration des fonctions qui attendent un contexte d'arrière-plan Manifest V2 : L'adoption de service workers dans Manifest V3 n'est pas compatible avec des méthodes telles que chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()et chrome.extension.getViews(). Il peut être nécessaire de migrer vers une conception qui transmet des messages entre d'autres contextes et l'agent de service en arrière-plan.
• Déplacement des requêtes CORS dans les scripts de contenu vers l'agent de service en arrière-plan : Il peut être nécessaire de déplacer les requêtes CORS dans les scripts de contenu vers le travailleur du service d'arrière-plan afin de se conformer à Manifest V3.
• Éviter d'exécuter du code externe ou des chaînes arbitraires : Manifest V3 ne permet plus l'exécution de logique externe à l'aide chrome.scripting.executeScript({code: '...'}), eval()et new Function(). Il peut être nécessaire de déplacer tout le code externe (JavaScript, WebAssembly, CSS) dans le groupe d'extensions, de mettre à jour les références de script et de style pour charger les ressources du groupe d'extensions et d'utiliser chrome.runtime.getURL() pour créer des URL de ressources lors de l'exécution.
• Mise à jour de certaines méthodes de script et CSS dans l'API Tabs : Comme mentionné précédemment, plusieurs méthodes passent de l'API Tabs à l'API Scripting dans Manifest V3. Il peut être nécessaire de mettre à jour tous les appels à ces méthodes pour utiliser la bonne API Manifest V3.

Et beaucoup plus!

N'hésitez pas à prendre le temps de vous tenir au courant de tous les changements. Après tout, ce changement est inévitable et si vous ne voulez pas que vos extensions Manifest V2 soient perdues en évitant cette transition, passez un peu de temps à vous armer des connaissances nécessaires.

D'un autre côté, si vous débutez dans la programmation d'extensions Chrome et que vous cherchez à vous lancer, une excellente façon de procéder est de plonger dans le monde des outils de développement Web de Chrome. Je l'ai fait grâce à un cours sur Apprentissage Linkedin, ce qui m'a mis au courant assez rapidement. Une fois que vous avez ces connaissances de base, revenez à cet article et traduisez ce que vous savez en Manifest V3 !

Alors, comment vais-je utiliser les fonctionnalités du nouveau Manifest V3 à l'avenir ?

Eh bien, pour moi, la transition vers Manifest V3 et la suppression du chrome.webRequest L'API semble déplacer les extensions des cas d'utilisation centrés sur les données (tels que les bloqueurs de publicités) vers des utilisations plus fonctionnelles et basées sur les applications. Je me suis éloigné du développement d'applications ces derniers temps car cela peut devenir assez gourmande en ressources a l'heure. Cependant, ce changement pourrait être ce qui me ramène!

La montée en puissance des outils d'IA ces derniers temps, dont beaucoup avec des API disponibles à l'utilisation, a déclenché des tonnes d'applications SaaS nouvelles et fraîches. Personnellement, je pense que cela arrive à point nommé avec le passage à davantage d'extensions Chrome basées sur les applications ! Alors que de nombreuses extensions plus anciennes peuvent être effacées de cette transition, de nombreuses nouvelles construites autour de nouvelles idées SaaS viendront prendre leur place.

Par conséquent, il s'agit d'une mise à jour passionnante pour sauter et réorganiser les anciennes extensions ou en créer de nouvelles ! Personnellement, je vois de nombreuses possibilités dans l'utilisation d'API qui impliquent l'utilisation de l'IA dans des extensions pour améliorer l'expérience de navigation d'un utilisateur. Mais ce n'est vraiment que la pointe de l'iceberg. Si vous cherchez à vraiment vous lancer avec vos propres extensions professionnelles ou à contacter des entreprises pour créer/mettre à jour des extensions pour elles, je vous recommande mise à niveau de votre compte Gmail pour les avantages qu'il offre dans la collaboration, le développement et la publication d'extensions sur le Chrome Web Store.

Cependant, n'oubliez pas que les exigences de chaque développeur sont différentes, alors apprenez ce dont vous avez besoin pour maintenir vos extensions actuelles à flot ou vos nouvelles !

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/