Skip to main content
Цей посібник пояснює, як інтегрувати Mellowtel у ваше розширення браузера без використання бандлерів, таких як Webpack або Vite. Натомість ти будеш використовувати один попередньо зібраний файл, який працює як в контент-скриптах, так і в сервісних працівниках.

Налаштування проєкту

Почни з базової структури розширення браузера:

Отримання бандлу Mellowtel

У тебе є два варіанти отримати файл mellowtel.js для твого розширення:

Варіант 1: Використовуй попередньо зібраний файл

Найпростіший спосіб почати - це використовувати попередньо зібраний файл mellowtel.js з репозиторію mellowtel-bundled.
  1. Перейди до репозиторію mellowtel-bundled
  2. Завантаж файл mellowtel.js
  3. Скопіюй його в директорію твого розширення

Варіант 2: Створи свій власний бандл

Якщо ти віддаєш перевагу створенню бандлу самостійно, виконай ці кроки:

Створи тимчасову директорію для бандлу

Створи тимчасову директорію для встановлення Mellowtel і створення бандлу:
Це створює окрему папку з пакетом Mellowtel, яку ти будеш використовувати лише для бандлінгу.

Бандлінг Mellowtel з esbuild

Зсередини директорії mellowtel-bundling, створи один бандл, який працює як у сервісних працівниках, так і в контент-скриптах:
Ця команда:
  • Бере джерело Mellowtel з node_modules/mellowtel/dist/index.js
  • Об’єднує всі залежності в один файл
  • Використовує формат IIFE з глобальним ім’ям для універсальної сумісності
  • Додає футер, щоб зробити експорт за замовчуванням доступним глобально
  • Оптимізує для середовища браузера і мінімізує вихідний файл
  • Створює mellowtel.js у директорії бандлінгу

Скопіюй бандл у своє розширення

Після виконання команди esbuild, скопіюй згенерований файл у директорію твого розширення:
Тепер ти можеш видалити тимчасову директорію бандлінгу, оскільки тобі потрібен був лише вихідний файл:
Твоя директорія розширення тепер містить зібраний файл Mellowtel, готовий до використання.

Налаштуй свій маніфест (обидва варіанти)

Незалежно від того, який варіант ти вибрав вище, налаштуй свій manifest.json, щоб включити бандл Mellowtel у контент-скрипти:
Важливо:
  • Поле "type": "module" дозволяє імпорт ES модулів у твоєму сервісному працівнику.
  • У масиві контент-скриптів mellowtel.js повинен бути завантажений перед content_script.js, щоб глобальна змінна Mellowtel була доступна, коли твій контент-скрипт запускається.

Використання Mellowtel у твоєму розширенні

Для твого сервісного працівника (background.js), імпортуй зібраний файл:
Для контент-скриптів Mellowtel доступний як глобальна змінна (імпорт не потрібен, оскільки він завантажується через маніфест):

Тестування вашого розширення

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