Passerelle d'extension Chrome avec interaction contextuelle (Manifeste V3)

Le but

Cette extension passe-partout fournit aux développeurs un point de départ pour créer leurs propres extensions Chrome à l'aide de Manifest V3.

Quoi de neuf

La plus grande amélioration de cette version est l'ajout d'une interface popup. Désormais, lorsque les utilisateurs cliquent sur le bouton d'extension dans la barre supérieure du navigateur, une fenêtre contextuelle interactive leur est présentée au lieu de simplement enregistrer un message sur la console.

Caractéristiques

Ce passe-partout démontre trois comportements d'extension clés :

1. Avant le chargement de la page : imprimez un message sur la console DevTools avant le chargement de la page.
2. Après le chargement de la page : imprimez un message sur la console DevTools avant le chargement de la page.
3. Interaction contextuelle : affiche une fenêtre contextuelle lorsque l'utilisateur clique sur le bouton d'extension, permettant des interactions utilisateur plus complexes.

L'extension fournit désormais un bouton dans la fenêtre contextuelle qui, lorsque vous cliquez dessus, injecte un script dans l'onglet actif pour modifier le DOM et enregistrer un message dans la console.

Installation

1. Clonez ou téléchargez les fichiers depuis github.com/llagerlof/fresh-chrome-extension et placez-les dans un répertoire.
2. Ouvrez la page des extensions de votre navigateur : chrome://extensions
3. Activez le « Mode développeur » dans le coin supérieur droit.
4. Cliquez sur Load Unpacked et sélectionnez le répertoire d'extension.

Comment le tester

1. Ouvrez n'importe quel site Web.
2. Cliquez sur le bouton d'extension dans la barre supérieure du navigateur. Vous verrez une fenêtre contextuelle avec un bouton.
3. Cliquez sur le bouton dans la fenêtre contextuelle intitulé "Cliquez sur ce bouton pour ajouter un div orange à la page".
4. Observez les changements suivants :
   • Un div orange apparaît en haut de la page avec le message "DOM modifié !"
   • Ouvrez les outils de développement (F12) et regardez la console. Vous verrez le message « Action exécutée à partir du popup ! »

Ce passe-partout fournit une base solide pour créer des extensions Chrome plus complexes. N'hésitez pas à le modifier et à l'étendre en fonction de vos besoins spécifiques.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!