Comment injecter une application React dans une extension Chrome en tant que script de contenu

Une extension Chrome avec une application React injectée en tant que script de contenu

Les extensions Chrome sont d'excellents outils vous permettant d'interagir avec le navigateur et les sites Web de différentes manières.

  • Les actions du navigateur et de la page qui apparaissent sous forme d'icônes dans la barre d'outils du navigateur et peuvent afficher une fenêtre contextuelle facultative.
  • Nouvelles pages d'onglets qui remplacent le nouvel onglet par défaut
  • Pages d'options pour la configuration des extensions Chrome
  • Menus contextuels Chrome apparaissant avec un clic droit
  • Notifications, qui se glissent en haut à droite de l'écran
  • Les scripts de contenu, qui injectent du JavaScript dans une page Web et peuvent modifier son interface utilisateur

Cet article concerne le chargement d'une application React dans un script de contenu. Installez d'abord create-react-app si vous ne l'avez pas. Voici le référentiel si vous voulez juste voir le code.

Créer une nouvelle application React

  • créer-réagir-application réagir-contenu-script

Mettre à jour le fichier manifeste

  • Trouvez-le dans /public/manifest.json

Le fichier manifest.json est requis pour fournir des informations importantes sur l'extension Chrome. Le manifeste_version, le nom et la version sont obligatoires pour que l'extension Chrome soit valide. Le tableau content_scripts est ce que nous allons injecter notre application React dans https://www.google.com/.

Vous pouvez injecter un script de contenu dans une page spécifique comme nous le faisons ici ou utiliser la clé de correspondance pour spécifier les URL que vous souhaitez charger dans votre code. Par exemple, [""] charge le script de contenu qui correspond schéma d'URL valide.

Mettre à jour le composant App

Supprimer le logo d'importation de './logo.svg'; et remplacez le code source de la balise d'image par "https://facebook.github.io/react/img/logo.svg".

Mettez à jour App.css pour être plus présentable.

Ajouter l'application au DOM

C’est ici que nous injectons le script de contenu dans le DOM sur https://www.google.com. Commencez par examiner le DOM du ou des sites Web dans lesquels vous souhaitez injecter un script de contenu. Sélectionnez ensuite un élément en fonction de l'endroit où vous souhaitez ajouter votre code au DOM.

J'ai choisi

, mais vous devrez peut-être faire des essais pour trouver ce qui vous convient le mieux. Vous pourriez même ne pas avoir besoin d'injecter du code HTML du tout.

Sélectionner où injecter le script de contenu

Déployer

  • Créez ensuite l'application pour la production en exécutant la commande yarn run build form /package.json.
  • Ouvrez l'onglet Extensions sous d'autres outils dans le menu Personnaliser et contrôler Google Chrome (avec les trois points verticaux à l'extrême droite de la barre d'outils du navigateur) ou accédez à chrome: // extensions.
  • Cochez la case en mode développeur.
  • Cliquez sur Charger l'extension non compressée… puis recherchez et sélectionnez le dossier de construction dans react-content-script / src / pour charger l'extension.
erreur de chargement du script de contenu

L'extension n'a pas pu être chargée car les noms de fichiers "css" et "js" spécifiés dans le manifeste sont différents de ceux générés par Webpack.

Les noms de fichiers CSS et JS générés par Webpack

Modifier les noms de fichiers de sortie de la construction

Vous pouvez simplement renommer main.css et main.js chaque fois que votre version est modifiée, par exemple. Dans ce cas, main.cacbacc7.css et main.f0a6875b.js, mais une meilleure solution consiste à modifier les noms de fichiers de sortie de la configuration de production Webpack afin que vous n’ayez pas à les mettre à jour manuellement lorsque vous souhaitez charger votre extension. Pour accéder à /config/webpack.config/prod, vous devez vous éjecter de l'application Create React.

  • Éjecter de Create React App avec une exécution de fil éjecter et taper y pour confirmer.
  • Supprimez les hachages générés des noms de fichiers de sortie CSS et JavaScript. Comparez ORIGINAL à UPDATED dans /config/webpack.config/prod.
// ... (Autre configuration)
// Note: défini ici car il sera utilisé plus d'une fois.
// ORIGINAL // const cssFilename = 'statique / css / [nom]. [Contenthash: 8] .css';
// MIS À JOUR
const cssFilename = 'statique / css / [nom] .css';
// ... (Autre configuration)
sortie: {
    // Le dossier de construction.
    path: paths.appBuild,
    // Noms de fichier JS générés (avec dossiers imbriqués).
    // Il y aura un ensemble principal et un fichier par bloc asynchrone.
    // Actuellement, nous n'annoncons pas le fractionnement du code, mais Webpack le prend en charge.
    // ORIGINAL // nom du fichier: 'statique / js / [nom]. [Chunkhash: 8] .js',
    // MIS À JOUR
    nom de fichier: 'static / js / [nom] .js',
// ... (Autre configuration)

Reconstruisez, rechargez et vérifiez que les noms de fichiers sont corrects avant de charger la version dans Chrome.

Application React injectée dans le script de contenu Extension Chrome

C'est tout. Merci de votre lecture et laissez-moi savoir si vous avez des questions.