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.
Это установит расширение локально для тестирования и разработки.