Configurazione di Webpack per Estensioni del Browser e Mellowtel

Questa guida descrive come configurare il tuo progetto di estensione del browser con Webpack, concentrandosi su una configurazione che supporta più punti di ingresso JavaScript e la gestione degli asset statici.

Passo 1: Configurazione Iniziale del Progetto

Inizia strutturando il tuo progetto per accogliere i file sorgente, gli asset statici e l’output finale del bundle. La directory del tuo progetto dovrebbe apparire così:

your-extension/
├── public/            # Contiene file statici come HTML, CSS e il manifest
│   ├── images/
│   ├── icons/
│   ├── manifest.json
│   └── popup.html
├── src/               # Contiene il tuo codice sorgente JavaScript
│   ├── background.js
│   ├── popup.js
│   ├── content_script.js
│   └── ... (altri file JS)
└── package.json       # File del pacchetto NPM

Passo 2: Configurazione di Node.js e NPM

Assicurati che Node.js e NPM siano installati sul tuo sistema. Node.js è essenziale per eseguire l’ecosistema dei pacchetti, e NPM viene utilizzato per gestire le dipendenze del tuo progetto.

Passo 3: Installazione di Webpack e Altre Dipendenze

Naviga nella directory principale del tuo progetto nel terminale e inizializza un nuovo progetto NPM se non l’hai già fatto:

npm init -y

Quindi, installa Webpack e i loader e plugin necessari:

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

Webpack raggruppa il tuo JavaScript e gli asset.
Babel ti permette di usare funzionalità moderne di JavaScript.
CopyPlugin copia file e directory nella directory di build.
File Loader risolve import/require() su un file in un URL ed emette il file nella directory di output.

Passo 4: Configurazione di Webpack

Crea un file webpack.config.js nella radice del tuo progetto. Questo file dovrebbe definire i tuoi punti di ingresso, la configurazione di output, le regole del modulo per il caricamento di diversi tipi di file e i plugin per funzionalità aggiuntive. Ecco come dovrebbe apparire il tuo webpack.config.js con la configurazione data:

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

module.exports = {
    mode: 'development', // Usa 'production' per le build di produzione
    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: '' } // Copia tutti gli asset e il manifest.json da 'public' a 'dist'
            ],
        }),
    ]
};

Passo 5: Regolare il Manifest e i File HTML

Assicurati che il tuo manifest.json e qualsiasi file HTML facciano riferimento correttamente agli script e agli asset. Ad esempio, gli script verranno emessi nella cartella dist, quindi aggiorna i percorsi di conseguenza.

Passo 6: Integrazione degli Script di Build in `package.json`

Dopo aver configurato il tuo progetto con Webpack e averlo configurato come descritto nei passaggi precedenti, vorrai automatizzare i processi di build e watch utilizzando gli script npm. Apri il tuo file package.json e aggiungi i seguenti script all’interno dell’oggetto scripts:

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

Ecco cosa fa ciascun script:

"build": Raggruppa la tua estensione in modalità produzione, ottimizzando l’output per il deployment. Questa modalità abilita ottimizzazioni come la minificazione e l’eliminazione del codice morto.
"watch": Esegue Webpack in modalità sviluppo e osserva i tuoi file per eventuali modifiche, ricompilando automaticamente il progetto quando un file viene modificato. Questo è utile durante lo sviluppo per un feedback immediato sulle modifiche.

Passo 7: Testare e Costruire l’Estensione

Per costruire la tua estensione per la produzione, usa:

npm run build

Questo comando invoca Webpack con il flag --mode production, ottimizzando il tuo progetto per il deployment. Per lo sviluppo, puoi fare in modo che Webpack osservi i tuoi file e ricompili ogni volta che vengono rilevate modifiche:

npm run watch

Questo rende il processo di sviluppo più fluido, poiché non devi ricostruire manualmente il progetto dopo ogni modifica.

Passo 7: Testare l’Estensione

Per testare la tua estensione in Chrome:

Vai a chrome://extensions/ nel browser Chrome.
Abilita “Modalità sviluppatore” in alto a destra.
Clicca su “Carica non pacchettizzata” e seleziona la tua cartella dist.

Questo installerà l’estensione localmente per scopi di test e sviluppo.

​Passo 1: Configurazione Iniziale del Progetto

​Passo 2: Configurazione di Node.js e NPM

​Passo 3: Installazione di Webpack e Altre Dipendenze

​Passo 4: Configurazione di Webpack

​Passo 5: Regolare il Manifest e i File HTML

​Passo 6: Integrazione degli Script di Build in package.json

​Passo 7: Testare e Costruire l’Estensione

​Passo 7: Testare l’Estensione