Налаштування проєкту
Почни з базової структури розширення браузера:Отримання бандлу Mellowtel
У тебе є два варіанти отримати файлmellowtel.js для твого розширення:
Варіант 1: Використовуй попередньо зібраний файл
Найпростіший спосіб почати - це використовувати попередньо зібраний файлmellowtel.js з репозиторію mellowtel-bundled.
- Перейди до репозиторію mellowtel-bundled
- Завантаж файл
mellowtel.js - Скопіюй його в директорію твого розширення
Варіант 2: Створи свій власний бандл
Якщо ти віддаєш перевагу створенню бандлу самостійно, виконай ці кроки:Створи тимчасову директорію для бандлу
Створи тимчасову директорію для встановлення Mellowtel і створення бандлу:Бандлінг Mellowtel з esbuild
Зсередини директоріїmellowtel-bundling, створи один бандл, який працює як у сервісних працівниках, так і в контент-скриптах:
- Бере джерело Mellowtel з
node_modules/mellowtel/dist/index.js - Об’єднує всі залежності в один файл
- Використовує формат IIFE з глобальним ім’ям для універсальної сумісності
- Додає футер, щоб зробити експорт за замовчуванням доступним глобально
- Оптимізує для середовища браузера і мінімізує вихідний файл
- Створює
mellowtel.jsу директорії бандлінгу
Скопіюй бандл у своє розширення
Після виконання команди esbuild, скопіюй згенерований файл у директорію твого розширення:Налаштуй свій маніфест (обидва варіанти)
Незалежно від того, який варіант ти вибрав вище, налаштуй свійmanifest.json, щоб включити бандл Mellowtel у контент-скрипти:
- Поле
"type": "module"дозволяє імпорт ES модулів у твоєму сервісному працівнику. - У масиві контент-скриптів
mellowtel.jsповинен бути завантажений передcontent_script.js, щоб глобальна змінна Mellowtel була доступна, коли твій контент-скрипт запускається.
Використання Mellowtel у твоєму розширенні
Для твого сервісного працівника (background.js), імпортуй зібраний файл:Тестування вашого розширення
Щоб протестувати ваше розширення:- Перейдіть на
chrome://extensions/у Chrome (або еквівалент у інших браузерах) - Увімкніть “Режим розробника”
- Натисніть “Завантажити розпаковане” і виберіть папку вашого розширення