mise en route
Manifest V3 est bientôt lancé! Consultez la documentation MV3 pour plus d’informations et envisagez de développer votre extension dans MV3.
Les Extensions sont faites de composants différents, mais cohérents. Les composants peuvent inclure des scripts d’arrière-plan, des scripts de contenu, une page d’options, des éléments D’interface utilisateur et divers fichiers logiques. Les composants d’Extension sont créés avec des technologies de développement web: HTML, CSS et JavaScript. Les composants d »une extension dépendront de sa fonctionnalité et peuvent ne pas nécessiter toutes les options.,
Ce tutoriel va construire une extension qui permet à l’utilisateur de changer la couleur d’arrière-plan de n’importe quelle page sur developer.chrome.com. il utilisera de nombreux composants de base pour donner une démonstration introductive de leurs relations.
pour commencer, créez un nouveau répertoire pour contenir les fichiers de l’extension.
l’extension terminée peut être téléchargée ici.
Créer le manifeste #
les Extensions de départ avec leur manifeste. Créez un fichier appelé manifest.json et inclure le code suivant, ou téléchargez le fichier ici.,
Le répertoire contenant le fichier manifeste peut être ajouté comme une extension dans le mode développeur dans son état actuel.
- ouvrez la page de gestion des extensions en accédant à
chrome://extensions.- la page de gestion des extensions peut également être ouverte en cliquant sur le menu Chrome, en survolant plus D’Outils, puis en sélectionnant Extensions.
- activez le mode développeur en cliquant sur l’interrupteur à bascule à côté du mode développeur.
- cliquez sur le bouton Charger décompressé et sélectionnez le répertoire d’extension.
Ta-da!, L’extension a été installée avec succès. Comme aucune icône n’a été incluse dans le manifeste, une icône de barre d’outils générique sera créée pour l’extension.
Ajouter instruction #
Bien que l’extension a été installée, il n’a pas d’instruction. Introduisez un script d’arrière-plan en créant un fichier intitulé background.js, ou en le téléchargeant ici et en le plaçant dans le répertoire d’extension.
les scripts D’arrière-plan et de nombreux autres composants importants doivent être enregistrés dans le manifeste., L’enregistrement d’un script d’arrière-plan dans le manifeste indique à l’extension quel fichier référencer et comment ce fichier doit se comporter.
l’extension est maintenant consciente qu’elle inclut un script d’arrière-plan non persistant et analysera le fichier enregistré pour les événements importants qu’elle doit écouter.
Cette extension aura besoin des informations d’une variable persistante dès son installation. Commencez par inclure un événement d’écoute pour runtime.onInstalled dans le script d’arrière-plan. Dans l’écouteur onInstalled, l’extension définira une valeur à l’aide de l’API de stockage., Cela permettra à plusieurs composants d’extension d’accéder à cette valeur et de la mettre à jour.
la plupart des API, y compris l’API de stockage, doivent être enregistrées sous le champ "permissions" dans le Manifeste pour que l’extension puisse les utiliser.
revenez à la page Gestion des extensions et cliquez sur le lien recharger. Un nouveau champ, inspecter les vues, devient disponible avec un lien bleu, page d’arrière-plan.,
Cliquez sur le lien pour afficher l’arrière-plan de script »s journal de la console, « The color is green.«
mettre en place une interface utilisateur #
les Extensions peuvent avoir de nombreuses formes d’une interface utilisateur, mais cela on va utiliser un popup. Créez et ajoutez un fichier intitulé popup.html dans le répertoire, ou téléchargez-le ici. Cette extension utilise un bouton pour changer la couleur d’arrière-plan.
comme le script d’arrière-plan, ce fichier doit être désigné comme une fenêtre contextuelle dans le manifeste souspage_action.,
la désignation des icônes de la barre d’outils est également incluse souspage_action dans le champdefault_icons. Téléchargez le dossier images ici, décompressez-le et placez-le dans le répertoire de l »extension. Mettez à jour le manifeste afin que l’extension sache comment utiliser les images.
les Extensions affichent également des images sur la page de gestion des extensions, l’avertissement d’autorisations et le favicon. Ces images sont désignées dans le manifeste sous icons.,
Si l’extension est rechargée à ce stade, elle inclura une icône en échelle de gris, mais ne contiendra aucune différence de fonctionnalité. Car page_action est déclaré dans le manifeste, c’est à l’extension de dire au navigateur lorsque l’utilisateur peut interagir avec des popup.html.
ajoutez des règles déclarées au script d’arrière-plan avec l’APIdeclarativeContent dans l’événement d’écouteruntime.onInstalled.
l’extension aura besoin d’une autorisation pour accéder à l’APIdeclarativeContent dans son manifeste.,
Le navigateur affichera désormais une pleine page couleur d’action de l’icône dans la barre d’outils du navigateur lorsque l’utilisateur accède à une URL qui contient "developer.chrome.com". Lorsque l’icône est en couleur, les utilisateurs peuvent cliquer dessus pour afficher la fenêtre contextuelle.HTML.
la dernière étape de l’interface utilisateur contextuelle consiste à ajouter de la couleur au bouton. Créez et ajoutez un fichier appelé https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js avec le code suivant dans le répertoire d’extension, ou téléchargé ici.
ce code saisit le bouton depopup.html et demande la valeur de couleur du stockage., Il applique ensuite la couleur comme arrière-plan du bouton. Inclure une balise de script à https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js dans popup.html.
Recharger l’extension pour afficher le bouton vert.
layer logic #
l’extension sait maintenant que la fenêtre contextuelle devrait être disponible pour les utilisateurs sur developer.chrome.com et affiche un bouton coloré, mais nécessite une logique pour une interaction utilisateur ultérieure. Mettez à jourhttps://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js pour inclure le code suivant.,
le code mis à jour ajoute un événementonclick sur le bouton, qui déclenche un script de contenu injecté par programme. Cela transforme la couleur d’arrière-plan de la page de la même couleur que le bouton. L’utilisation de l’injection programmatique permet des scripts de contenu invoqués par l’utilisateur, au lieu d’insérer automatiquement du code indésirable dans les pages web.
Le Manifeste aura besoin de l’autorisationactiveTabpour permettre à l’extension d’accéder temporairement à l’APItabs. Cela permet à l’extension d’appeler tabs.executeScript.,
L’extension est maintenant pleinement fonctionnel! Rechargez l’extension, actualisez cette page, ouvrez la fenêtre contextuelle et cliquez sur le bouton pour la rendre verte! Toutefois, certains utilisateurs peuvent vouloir changer le fond d’une couleur différente.
Donner aux utilisateurs des options #
L’extension permet uniquement aux utilisateurs de modifier l’arrière-plan vert. Y compris une page d »options donne aux utilisateurs plus de contrôle sur la fonctionnalité de l » extension, personnaliser davantage leur expérience de navigation.,
commencez par créer un fichier dans le répertoire appeléoptions.html et incluez le code suivant, ou téléchargez-le ici.
Enregistrez ensuite la page options dans le manifeste,
rechargez L’extension et cliquez sur Détails.
Faites défiler la page de détails et sélectionnez Options D’Extension pour afficher la page d’options, bien qu’elle apparaisse actuellement vide.
La dernière étape consiste à ajouter la logique des options., Créez un fichier appelé options.js dans le répertoire d’extension avec le code suivant, ou téléchargez-le ici.
Quatre options de couleur sont fournies puis générées sous forme de boutons sur la page options avec les écouteurs d’événement onclick. Lorsque l’utilisateur clique sur un bouton, il met à jour la valeur de couleur dans le stockage global de l’extension. Étant donné que tous les fichiers de l’extension tirent les informations de couleur du stockage global, aucune autre valeur n’a besoin d’être mise à jour.
félicitations! Le répertoire contient maintenant une extension Chrome entièrement fonctionnelle, bien que simpliste.
quelle est la prochaine étape?,
- L’aperçu de L’Extension Chrome sauvegarde un peu, et remplit beaucoup de détails sur l’architecture des Extensions en général, et certains concepts spécifiques que les développeurs voudront connaître.
- découvrez les options disponibles pour le débogage des Extensions dans le tutoriel de débogage.
- Chrome Extensions ont accès à des API puissantes au-delà de ce qui est disponible sur le web ouvert. Chrome.* La documentation des API parcourra chaque API.
- Le Guide du développeur contient des dizaines de liens supplémentaires vers des documents pertinents pour la création d’extensions avancées.,