Développement d'extensions Chrome - Développer une application minimale avec TypeScript, React, Tailwind CSS et Webpack

Introduction

Dans ce blog, nous explorerons comment configurer et développer une extension Chrome à l'aide de TypeScript, React, Tailwind CSS et Webpack. Nous allons créer une extension minimale appelée "NoteMe" ✍️ pour mettre notre compréhension à l'épreuve. Notre extension comprendra les fonctionnalités suivantes :

• Autoriser les utilisateurs à ajouter plusieurs notes pour un site Web donné
• Permettre aux utilisateurs d'afficher les notes enregistrées pour un site Web donné
• Fournir la possibilité de supprimer des notes pour un site Web donné
• Enregistrer les notes localement dans le stockage du navigateur
• Synchronisez éventuellement les notes avec un backend pour le stockage dans le cloud

Actualisation

Dans ce blog, nous apprendrons comment créer une extension Chrome à l'aide des technologies modernes. Ce guide suppose que vous êtes déjà familiarisé avec la création et le téléchargement d'une extension sur Chrome lors du développement local. Si vous êtes nouveau dans ce domaine ou si vous avez besoin d'une présentation détaillée des bases, je vous recommande de consulter mon blog précédent : Lien

Aperçu des extensions

L'extension comprendra les composants suivants :

• Bouton bascule : Un bouton pour ouvrir et fermer la barre latérale.
• Barre latérale : Un panneau polyvalent où les utilisateurs peuvent : Écrivez de nouvelles notes. Afficher les notes enregistrées. Supprimez les notes enregistrées. Synchronisez les notes avec le backend (disposition disponible dans le code, bien qu'aucun backend ne soit actuellement connecté).
• Popup : Une petite fenêtre permettant aux utilisateurs de repositionner le bouton bascule (utilisé pour ouvrir/fermer la barre latérale) à des positions prédéfinies sur l'écran Remarque : Bien qu'il n'y ait pas d'intégration backend dans cette implémentation, le code inclut des dispositions pour connecter un backend à l'avenir.

Vous trouverez ci-dessous des captures d'écran montrant à quoi ressemblera l'extension une fois terminée :

Conditions préalables

Avant de plonger dans ce didacticiel, assurez-vous que les outils suivants sont installés sur votre système :

• Node.js (v18.16 LTS ou version ultérieure)
• NPM (Node Package Manager, fourni avec Node.js)
• TypeScript
• Webpack
• VS Code Editor (ou tout éditeur de code de votre choix)

Extension à partir de 40 000 pieds

La figure ci-dessus fournit un aperçu de haut niveau du fonctionnement interne de cette extension. Voici quelques points clés que nous pouvons déduire du diagramme :

• Le script de contenu interagit directement avec le DOM de la page Web parent, lui permettant de modifier le contenu de la page.
• Les popups, les arrière-plan et les scripts de contenu communiquent entre eux via le système de messagerie d'exécution de Chrome.
• Pour les tâches liées au stockage Chrome ou aux appels d'API backend, le contenu ou les scripts contextuels délèguent la responsabilité au travailleur en arrière-plan à l'aide du système de messagerie d'exécution.
• Le script d'arrière-plan agit comme seul médiateur avec le backend de l'application et le stockage de Chrome. Il relaie également les notifications, le cas échéant, vers d'autres scripts à l'aide de la messagerie d'exécution.
• Les popups et les scripts de contenu échangent des informations directement via le système de messagerie d'exécution de Chrome.

Configuration de l'extension

Bien que les projets d'extension Chrome n'exigent pas une structure de projet spécifique, ils nécessitent qu'un fichier manifest.json se trouve à la racine du répertoire de construction. Profitant de cette flexibilité, nous définirons une structure de projet personnalisée qui permet d’organiser efficacement différents scripts. Cette structure permettra une meilleure réutilisation du code dans les scripts et minimisera la duplication, rationalisant ainsi notre processus de développement.

Étape 1 : Créer une structure de répertoires de base pour le projet

Pour commencer, nous allons mettre en place une structure de répertoires fondamentale pour le projet. Vous pouvez utiliser le script bash suivant pour créer la structure de base avec le fichier manifest.json :

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
    if [ ! -d "" ]; then
        mkdir 
    fi
}

create_file () {
    if [ ! -e "/" ]; then
        touch /
    fi
}

create_public_directories () {
    for public_path in "${public_paths[@]}";
    do
        create_directory $public_path
    done
}

create_source_directories () {
    for source_path in "${source_paths[@]}";
    do
        create_directory $source_path
    done
}

execute () {
    echo "creating project struture at "${bash_script_absolute_path}
    create_directory $project_name
    cd $bash_script_absolute_path"/"$project_name
    create_public_directories
    create_source_directories
    create_file $manifest_file $public_directory_path
    echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Assurez-vous que la structure de vos répertoires ressemble à celle présentée dans la capture d'écran ci-dessous.

Étape 2 : Le fichier manifest.json situé dans le répertoire public doit être structuré comme indiqué ci-dessous :

{
    "manifest_version": 3,
    "name": "NoteMe",
    "version": "1.0",
    "description": "A Chrome extension built with React and TypeScript using Webpack.",
    "action": {
      "default_popup": "popup.html",
      "default_icon": "app-icon.png"
    },
    "background": {
      "service_worker": "background.js",
      "type": "module"
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "run_at": "document_end"
      }
    ],
    "permissions": [
      "storage",
      "activeTab",
      "scripting",
      "webNavigation"
    ],
    "host_permissions": ["<all_urls>"],
    "web_accessible_resources": [
      {
        "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
        "matches": ["<all_urls>"]
      }
    ]
  }

Points à noter :

• Les extensions de fichier sont .js car les fichiers .ts seront compilés en fichiers .js, qui sont requis lors de l'exécution dans l'environnement Chrome.
• Le champ des correspondances utilise comme valeur, permettant à l'extension de fonctionner sur n'importe quelle page Web chargée dans Chrome.
• Trois fichiers image sont référencés : app-icon.png, sidebar-open.png et sidebar-close.png. Vous pouvez trouver ces fichiers dans le référentiel lié à la fin de ce blog.
• Le fichier manifest.json doit être placé au niveau racine du répertoire dist après la construction du projet. Pour garantir cela, nous devons configurer les paramètres du webpack pour le déplacer de manière appropriée pendant le processus de construction.

Étape 3 : initialiser npm et installer les dépendances

• Commencez par initialiser npm dans votre projet à l'aide de la commande suivante : npm init -y
• Ajoutez les dépendances de développement nécessaires à la section devDependencies de votre projet. Exécutez la commande suivante : npm i --save-dev @types/chrome @types/react @types/react-dom autoprefixer copy-webpack-plugin css-loader mini-css-extract-plugin postcss postcss-loader style-loader tailwindcss ts-loader typescript webpack webpack-cli webpack-dev-serveur
• Ajoutez les dépendances d'exécution nécessaires à l'exécution du projet : npm i --save réagir réagir-dom

Étape 4 : Créer les fichiers référencés dans le manifest.json

Créez les fichiers suivants qui sont référencés dans le manifest.json : backgroun.ts, content.ts et popup.html.

• background.ts : Créez ce fichier dans le répertoire src/scripts/background
• content.ts : Créez ce fichier dans le répertoire src/scripts/content
• popup.html Créez ce fichier dans le répertoire public

Étape 5 : Mettre à jour la fenêtre contextuelle et le code d'arrière-plan

Ajoutez le code suivant au fichier popup.html dans le répertoire public :

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
    if [ ! -d "" ]; then
        mkdir 
    fi
}

create_file () {
    if [ ! -e "/" ]; then
        touch /
    fi
}

create_public_directories () {
    for public_path in "${public_paths[@]}";
    do
        create_directory $public_path
    done
}

create_source_directories () {
    for source_path in "${source_paths[@]}";
    do
        create_directory $source_path
    done
}

execute () {
    echo "creating project struture at "${bash_script_absolute_path}
    create_directory $project_name
    cd $bash_script_absolute_path"/"$project_name
    create_public_directories
    create_source_directories
    create_file $manifest_file $public_directory_path
    echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Remarque :

Le code ci-dessus installe deux auditeurs :

1. La fonction enregistrée par chrome.runtime.onInstalled.addListener s'exécute chaque fois que l'extension est installée dans le navigateur. Cela peut être utilisé pour initialiser le stockage Chrome ou un backend (le cas échéant) avec un état prédéfini.
2. La fonction enregistrée par chrome.runtime.onMessage.addListener s'exécute chaque fois que le script d'arrière-plan reçoit un message du contenu ou des scripts contextuels.

De plus, l'instruction import amène les écouteurs du répertoire src/lib. La logique principale de l'application est construite dans src/lib, permettant une réutilisation dans différents contextes (par exemple, le contenu et les scripts d'arrière-plan).

Étape 6 : Présentation du répertoire src/lib

Le répertoire src/lib héberge la logique de base de l'extension. Vous trouverez ci-dessous un aperçu de sa structure et de ses composants clés :

• Répertoire des composants : Contient tous les composants React utilisés dans l'extension.
• lib/components/ContentApp.tsx : Agit comme composant conteneur pour le script de contenu.
• lib/components/NoteMePosition.tsx : Contient le composant responsable du script popup.
• helpers.ts : Comprend les fonctions d'assistance utilisées dans toute l'extension.
• stockage-model.ts : Gère les interactions avec le stockage local de Chrome. Pour plus de détails sur la structure des données stockées, reportez-vous à ce fichier avec types.ts.
• types.ts : Définit les types personnalisés utilisés dans l'extension.
• worker.ts : Contient des rappels pour les auditeurs d'événements en arrière-plan.

Pour une mise en œuvre détaillée, veuillez vous référer au code réel dans le référentiel.

Étape 7 : Montage des composants React

Dans cette étape, nous montons les composants React pour le rendu. Ces composants sont montés dans deux scripts différents : src/scripts/content/content.ts et src/scripts/popup/popup.ts.

Script contextuel : Trouvé dans src/scripts/popup/popup.ts.

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
    if [ ! -d "" ]; then
        mkdir 
    fi
}

create_file () {
    if [ ! -e "/" ]; then
        touch /
    fi
}

create_public_directories () {
    for public_path in "${public_paths[@]}";
    do
        create_directory $public_path
    done
}

create_source_directories () {
    for source_path in "${source_paths[@]}";
    do
        create_directory $source_path
    done
}

execute () {
    echo "creating project struture at "${bash_script_absolute_path}
    create_directory $project_name
    cd $bash_script_absolute_path"/"$project_name
    create_public_directories
    create_source_directories
    create_file $manifest_file $public_directory_path
    echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Script de contenu : Trouvé dans src/scripts/content/content.ts.

{
    "manifest_version": 3,
    "name": "NoteMe",
    "version": "1.0",
    "description": "A Chrome extension built with React and TypeScript using Webpack.",
    "action": {
      "default_popup": "popup.html",
      "default_icon": "app-icon.png"
    },
    "background": {
      "service_worker": "background.js",
      "type": "module"
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "run_at": "document_end"
      }
    ],
    "permissions": [
      "storage",
      "activeTab",
      "scripting",
      "webNavigation"
    ],
    "host_permissions": ["<all_urls>"],
    "web_accessible_resources": [
      {
        "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
        "matches": ["<all_urls>"]
      }
    ]
  }

points clés :

• Scripts de montage séparés :   Les scripts de popup et de contenu fonctionnent dans différents contextes  
• Script Popup : S'exécute dans le contexte de la page Web popup.html dans laquelle il est chargé.  
• Script de contenu : S'exécute dans le contexte de la page Web principale chargée dans le navigateur.
• Shadow DOM pour le script de contenu :  
  • Les styles injectés par le script de contenu pourraient potentiellement affecter l'apparence de la page Web parent.  
  • Pour éviter cela, nous utilisons le Shadow DOM pour encapsuler les styles, en veillant à ce qu'ils restent isolés dans l'extension.  
  • Ceci n'est pas nécessaire pour le script popup, car il fonctionne dans son propre environnement isolé (popup.html).

Étape 8 : Configurations pour la compilation et la construction

Ajout des configurations requises pour la compilation et la construction de l'extension

Pour réussir à compiler et construire l'extension, nous devons configurer les fichiers suivants :

1. postcss.config.js
2. tailwind.config.js
3. tsconfig.json
4. webpack.config.js

Points clés :

• Paramètres par défaut : Dans la mesure du possible, des paramètres par défaut sont fournis pour simplifier le processus et garantir que l'accent reste mis sur l'objectif principal : créer une extension entièrement fonctionnelle.
• Détails dans le référentiel : Pour les configurations complètes et les paramètres détaillés de ces fichiers, veuillez vous référer au référentiel de code.

Ces configurations gèrent la compilation TypeScript, l'intégration CSS Tailwind et le processus global de création de Webpack pour l'extension.

Tester l'extension

1. Générer le répertoire dist : Exécutez la commande suivante pour créer le répertoire dist :  npm run build
2. Télécharger sur Chrome :    
   • Ouvrez Chrome et accédez à chrome://extensions/.    
   • Activez le Mode développeur dans le coin supérieur droit.    
   • Cliquez sur Load Unpacked et sélectionnez le répertoire dist.
3. Vérifier l'installation :
   • Une fois chargée, l'icône de l'extension apparaîtra par défaut sur chaque page dans le coin inférieur droit.
4. Vérification des fonctionnalités :
   • Contrôle de position : Utilisez les commandes de la fenêtre contextuelle pour modifier la position de l'icône.
   • Fonctionnalité Notes : Les notes sont enregistrées indépendamment pour chaque site Web et peuvent être supprimées pour un site spécifique sans affecter les autres.
5. Simulation back-end :
   • Bien qu'il n'y ait actuellement aucun backend connecté, le code inclut une disposition permettant d'en intégrer un.
   • L'implémentation actuelle imite une connexion backend utilisant setTimeout et promet de simuler des interactions asynchrones.

Voici quelques captures d'écran capturées lors des tests de l'extension.

Points clés à retenir

Voici quelques points clés à retenir de ce blog,

• Nous avons exploré comment divers composants de l'environnement Chrome, tels que les scripts de contenu, les scripts contextuels et les travailleurs en arrière-plan, communiquent entre eux à l'aide du système de messagerie d'exécution de Chrome.
• Nous avons appris à configurer et à créer une extension Chrome à partir de zéro, notamment en configurant la structure du projet, en installant les dépendances et en écrivant les fonctionnalités de base.
• Nous avons découvert quelques bonnes pratiques, telles que :
  • Amélioration de la réutilisabilité du code dans les scripts pour la maintenabilité et l'évolutivité.
  • Utilisation de Shadow DOM dans les scripts de contenu pour éviter les conflits de style avec la page Web parent.

Aperçu de l'avenir

À l'avenir, je prévois de travailler sur un autre blog où nous explorerons le processus de publication d'une extension Chrome entièrement fonctionnelle sur le Chrome Web Store. Le but de ce blog sera de :

• Développer une extension suffisamment complexe pour résoudre un problème du monde réel.
• Démontrez le processus étape par étape de publication de l'extension sur le Chrome Web Store.

Merci d'avoir pris le temps de lire ce blog ! Votre intérêt et votre soutien comptent beaucoup pour moi. Je suis ravi de partager plus d’informations alors que je poursuis ce voyage.

Bon codage !

Lien github : https://github.com/gauravnadkarni/chrome-extension-starter-app

Cet article a été initialement publié sur Medium.

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!