Configuration Webpack pour Extensions de Navigateur et Mellowtel

Ce guide explique comment configurer votre projet d’extension de navigateur avec Webpack, en se concentrant sur une configuration qui prend en charge plusieurs points d’entrée JavaScript et la gestion des actifs statiques.

Étape 1 : Configuration Initiale du Projet

Commence par structurer ton projet pour accueillir les fichiers sources, les actifs statiques et le résultat final empaqueté. Ton répertoire de projet devrait ressembler à ceci :

your-extension/
├── public/            # Contient des fichiers statiques comme HTML, CSS, et le manifeste
│   ├── images/
│   ├── icons/
│   ├── manifest.json
│   └── popup.html
├── src/               # Contient ton code source JavaScript
│   ├── background.js
│   ├── popup.js
│   ├── content_script.js
│   └── ... (tout autre fichier JS)
└── package.json       # Fichier de package NPM

Étape 2 : Installation de Node.js et NPM

Assure-toi que Node.js et NPM sont installés sur ton système. Node.js est essentiel pour exécuter l’écosystème de packages, et NPM est utilisé pour gérer les dépendances de ton projet.

Étape 3 : Installation de Webpack et Autres Dépendances

Navigue vers le répertoire racine de ton projet dans le terminal et initialise un nouveau projet NPM si ce n’est pas déjà fait :

npm init -y

Ensuite, installe Webpack et les chargeurs et plugins nécessaires :

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env copy-webpack-plugin file-loader

Webpack empaquette ton JavaScript et tes actifs.
Babel te permet d’utiliser des fonctionnalités JavaScript modernes.
CopyPlugin copie des fichiers et répertoires dans ton répertoire de build.
File Loader résout import/require() sur un fichier en une URL et émet le fichier dans le répertoire de sortie.

Étape 4 : Configuration de Webpack

Crée un fichier webpack.config.js à la racine de ton projet. Ce fichier doit définir tes points d’entrée, la configuration de sortie, les règles de module pour charger différents types de fichiers, et les plugins pour des fonctionnalités supplémentaires. Voici à quoi devrait ressembler ton webpack.config.js avec la configuration donnée :

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'development', // Utilise 'production' pour les builds de production
    entry: {
        background: path.join(__dirname, 'src', 'background.js'),
        popup: path.join(__dirname, 'src', 'popup.js'),
        content_script: path.join(__dirname, 'src', 'content_script.js'),
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: ""
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ],
            },
        ]
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: 'public', to: '' } // Copie tous les actifs et le manifest.json de 'public' vers 'dist'
            ],
        }),
    ]
};

Étape 5 : Ajustement du Manifest et des Fichiers HTML

Assure-toi que ton manifest.json et tous les fichiers HTML référencent correctement les scripts et les actifs. Par exemple, les scripts seront sortis dans le dossier dist, alors mets à jour les chemins en conséquence.

Étape 6 : Intégration des Scripts de Build dans `package.json`

Après avoir configuré ton projet avec Webpack et l’avoir configuré comme décrit dans les étapes précédentes, tu voudras automatiser les processus de build et de surveillance à l’aide de scripts npm. Ouvre ton fichier package.json et ajoute les scripts suivants dans l’objet scripts :

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode production",
  "watch": "webpack --mode development --watch"
},

Voici ce que fait chaque script :

"build" : Empaquète ton extension en mode production, optimisant la sortie pour le déploiement. Ce mode active des optimisations comme la minification et l’élimination de code mort.
"watch" : Exécute Webpack en mode développement et surveille tes fichiers pour les changements, recompilant automatiquement le projet lorsqu’un fichier est modifié. Ceci est utile pendant le développement pour un retour immédiat sur les changements.

Étape 7 : Tester et Construire l’Extension

Pour construire ton extension pour la production, utilise :

npm run build

Cette commande invoque Webpack avec le drapeau --mode production, optimisant ton projet pour le déploiement. Pour le développement, tu peux demander à Webpack de surveiller tes fichiers et de recompiler chaque fois que des changements sont détectés :

npm run watch

Cela rend le processus de développement plus fluide, car tu n’as pas besoin de reconstruire manuellement le projet après chaque changement.

Étape 7 : Tester l’Extension

Pour tester ton extension dans Chrome :

Va sur chrome://extensions/ dans le navigateur Chrome.
Active le “Mode développeur” en haut à droite.
Clique sur “Charger l’extension non empaquetée” et sélectionne ton dossier dist.

Cela installera l’extension localement pour les tests et le développement.

​Étape 1 : Configuration Initiale du Projet

​Étape 2 : Installation de Node.js et NPM

​Étape 3 : Installation de Webpack et Autres Dépendances

​Étape 4 : Configuration de Webpack

​Étape 5 : Ajustement du Manifest et des Fichiers HTML

​Étape 6 : Intégration des Scripts de Build dans package.json

​Étape 7 : Tester et Construire l’Extension

​Étape 7 : Tester l’Extension