Webpack Setup voor Browserextensies en Mellowtel

Deze gids beschrijft hoe je je browserextensieproject kunt opzetten met Webpack, met de nadruk op een configuratie die meerdere JavaScript-entry points en statisch assetbeheer ondersteunt.

Stap 1: Initiële Projectopzet

Begin met het structureren van je project om bronbestanden, statische assets en de uiteindelijke gebundelde output te accommoderen. Je projectdirectory zou er ongeveer zo uit moeten zien:

your-extension/
├── public/            # Bevat statische bestanden zoals HTML, CSS en het manifest
│   ├── images/
│   ├── icons/
│   ├── manifest.json
│   └── popup.html
├── src/               # Bevat je JavaScript-broncode
│   ├── background.js
│   ├── popup.js
│   ├── content_script.js
│   └── ... (andere JS-bestanden)
└── package.json       # NPM package bestand

Stap 2: Node.js en NPM Instellen

Zorg ervoor dat Node.js en NPM op je systeem zijn geïnstalleerd. Node.js is essentieel voor het uitvoeren van het package-ecosysteem, en NPM wordt gebruikt om de afhankelijkheden van je project te beheren.

Stap 3: Webpack en Andere Afhankelijkheden Installeren

Navigeer naar de hoofdmap van je project in de terminal en initialiseer een nieuw NPM-project als je dat nog niet hebt gedaan:

npm init -y

Installeer vervolgens Webpack en de benodigde loaders en plugins:

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

Webpack bundelt je JavaScript en assets.
Babel stelt je in staat moderne JavaScript-functies te gebruiken.
CopyPlugin kopieert bestanden en mappen naar je build-directory.
File Loader lost import/require() op een bestand op in een URL en zet het bestand in de outputdirectory.

Stap 4: Webpack Configureren

Maak een webpack.config.js bestand in de hoofdmap van je project. Dit bestand moet je entry points, outputconfiguratie, module regels voor het laden van verschillende bestandstypen en plugins voor extra functionaliteit definiëren. Hier is hoe je webpack.config.js eruit zou moeten zien met de gegeven setup:

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

module.exports = {
    mode: 'development', // Gebruik 'production' voor productie builds
    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: '' } // Kopieer alle assets en de manifest.json van 'public' naar 'dist'
            ],
        }),
    ]
};

Stap 5: Het Manifest en HTML-bestanden Aanpassen

Zorg ervoor dat je manifest.json en eventuele HTML-bestanden de scripts en assets correct verwijzen. Bijvoorbeeld, scripts worden naar de dist map uitgevoerd, dus update de paden dienovereenkomstig.

Stap 6: Build Scripts Integreren in `package.json`

Nadat je je project met Webpack hebt opgezet en geconfigureerd zoals beschreven in de vorige stappen, wil je de build- en watch-processen automatiseren met npm scripts. Open je package.json bestand en voeg de volgende scripts toe binnen het scripts object:

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

Dit is wat elk script doet:

"build": Bundelt je extensie in productiemodus, optimaliseert de output voor deployment. Deze modus activeert optimalisaties zoals minificatie en het verwijderen van dode code.
"watch": Voert Webpack uit in ontwikkelingsmodus en houdt je bestanden in de gaten voor wijzigingen, waarbij het project automatisch opnieuw wordt gecompileerd wanneer een bestand wordt gewijzigd. Dit is handig tijdens de ontwikkeling voor directe feedback op wijzigingen.

Stap 7: Testen & Bouwen van de Extensie

Om je extensie voor productie te bouwen, gebruik:

npm run build

Deze opdracht roept Webpack aan met de --mode production vlag, waardoor je project wordt geoptimaliseerd voor deployment. Voor ontwikkeling kun je Webpack je bestanden laten volgen en opnieuw compileren wanneer er wijzigingen worden gedetecteerd:

npm run watch

Dit maakt het ontwikkelproces soepeler, omdat je het project niet handmatig opnieuw hoeft te bouwen na elke wijziging.

Stap 7: De Extensie Testen

Om je extensie in Chrome te testen:

Ga naar chrome://extensions/ in de Chrome-browser.
Schakel “Ontwikkelaarsmodus” in rechtsboven.
Klik op “Pakket zonder compressie laden” en selecteer je dist map.

Dit zal de extensie lokaal installeren voor test- en ontwikkeldoeleinden.

​Stap 1: Initiële Projectopzet

​Stap 2: Node.js en NPM Instellen

​Stap 3: Webpack en Andere Afhankelijkheden Installeren

​Stap 4: Webpack Configureren

​Stap 5: Het Manifest en HTML-bestanden Aanpassen

​Stap 6: Build Scripts Integreren in package.json

​Stap 7: Testen & Bouwen van de Extensie

​Stap 7: De Extensie Testen