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 :
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
L'extension comprendra les composants suivants :
Vous trouverez ci-dessous des captures d'écran montrant à quoi ressemblera l'extension une fois terminée :
Avant de plonger dans ce didacticiel, assurez-vous que les outils suivants sont installés sur votre système :
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 :
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.
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.
{
"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 :
Créez les fichiers suivants qui sont référencés dans le manifest.json : backgroun.ts, content.ts et popup.html.
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 :
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).
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 :
Pour une mise en œuvre détaillée, veuillez vous référer au code réel dans le référentiel.
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>"]
}
]
}
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 :
Ces configurations gèrent la compilation TypeScript, l'intégration CSS Tailwind et le processus global de création de Webpack pour l'extension.
Voici quelques captures d'écran capturées lors des tests de l'extension.
Voici quelques points clés à retenir de ce blog,
À 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 :
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!
Comment modifier le texte sur l'image
L'Apple Store ne peut pas se connecter
Comment utiliser le stockage cloud
Méthode de définition de l'espace HTML
Que dois-je faire si mon iPad ne peut pas être chargé ?
utilisation du latex
utilisation de la fonction de valeur
Étapes de création du projet SpringBoot
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
