Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.mellowtel.com/llms.txt

Use this file to discover all available pages before exploring further.

Цей посібник описує, як налаштувати ваш проект розширення браузера за допомогою Webpack, зосереджуючись на конфігурації, яка підтримує кілька точок входу JavaScript і управління статичними активами.

​
Крок 1: Початкове налаштування проекту

Почніть зі структурування вашого проекту для розміщення вихідних файлів, статичних активів і кінцевого зібраного результату. Директорія вашого проекту має виглядати приблизно так: 
your-extension/
├── public/            # Містить статичні файли, такі як HTML, CSS і маніфест
│   ├── images/
│   ├── icons/
│   ├── manifest.json
│   └── popup.html
├── src/               # Містить ваш вихідний код JavaScript
│   ├── background.js
│   ├── popup.js
│   ├── content_script.js
│   └── ... (будь-які інші JS файли)
└── package.json       # Файл пакета NPM

​
Крок 2: Налаштування Node.js та NPM

Переконайтеся, що Node.js та NPM встановлені на вашій системі. Node.js необхідний для запуску екосистеми пакетів, а NPM використовується для управління залежностями вашого проекту.

​
Крок 3: Встановлення Webpack та інших залежностей

Перейдіть до кореневої директорії вашого проекту в терміналі та ініціалізуйте новий проект NPM, якщо ви ще цього не зробили: 
npm init -y
Потім встановіть Webpack та необхідні завантажувачі та плагіни: 
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env copy-webpack-plugin file-loader
  • Webpack збирає ваш JavaScript та активи.
  • Babel дозволяє використовувати сучасні можливості JavaScript.
  • CopyPlugin копіює файли та директорії у вашу директорію збірки.
  • File Loader вирішує import/require() на файлі в URL і виводить файл у вихідну директорію.

​
Крок 4: Налаштування Webpack

Створіть файл webpack.config.js у кореневій директорії вашого проекту. Цей файл має визначати ваші точки входу, конфігурацію виходу, правила модулів для завантаження різних типів файлів та плагіни для додаткової функціональності. Ось як ваш webpack.config.js має виглядати з даною конфігурацією: 
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'development', // Використовуйте '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: '' } // Копіює всі активи та manifest.json з 'public' до 'dist'
            ],
        }),
    ]
};

​
Крок 5: Налаштування маніфесту та HTML файлів

Переконайтеся, що ваш manifest.json та будь-які HTML файли правильно посилаються на скрипти та активи. Наприклад, скрипти будуть виведені у папку dist, тому оновіть шляхи відповідно.

​
Крок 6: Інтеграція скриптів збірки у package.json

Після налаштування вашого проекту з Webpack та його конфігурації, як описано в попередніх кроках, ви захочете автоматизувати процеси збірки та спостереження за допомогою скриптів npm. Відкрийте ваш файл package.json і додайте наступні скрипти в об’єкт scripts: 
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode production",
  "watch": "webpack --mode development --watch"
},
Ось що робить кожен скрипт:
  • "build": Збирає ваше розширення в режимі виробництва, оптимізуючи вихід для розгортання. Цей режим вмикає оптимізації, такі як мінімізація та усунення мертвого коду.
  • "watch": Запускає Webpack у режимі розробки та спостерігає за вашими файлами на зміни, автоматично перекомпілюючи проект при зміні файлу. Це корисно під час розробки для отримання миттєвого зворотного зв’язку про зміни.

​
Крок 7: Тестування та збірка розширення

Щоб зібрати ваше розширення для виробництва, використовуйте: 
npm run build
Ця команда викликає Webpack з прапором --mode production, оптимізуючи ваш проект для розгортання. Для розробки ви можете налаштувати Webpack на спостереження за вашими файлами та перекомпіляцію щоразу, коли виявляються зміни: 
npm run watch
Це робить процес розробки більш плавним, оскільки вам не потрібно вручну перебудовувати проект після кожної зміни.

​
Крок 7: Тестування розширення

Щоб протестувати ваше розширення в Chrome:
  1. Перейдіть до chrome://extensions/ у браузері Chrome.
  2. Увімкніть “Режим розробника” у верхньому правому куті.
  3. Натисніть “Завантажити розпаковане” і виберіть вашу папку dist.
Це встановить розширення локально для тестування та розробки.