> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Інтеграція Mellowtel без бандлерів

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

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

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

```
your-extension/
├── icons/
├── popup/
│   ├── popup.html
│   └── popup.js
├── background.js           # Твій сервісний працівник
├── content_script.js
├── manifest.json
└── mellowtel.js           # Буде додано на наступному кроці
```

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

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

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

Найпростіший спосіб почати - це використовувати попередньо зібраний файл `mellowtel.js` з [репозиторію mellowtel-bundled](https://github.com/mellowtel-inc/mellowtel-bundled).

1. Перейди до [репозиторію mellowtel-bundled](https://github.com/mellowtel-inc/mellowtel-bundled)
2. Завантаж файл `mellowtel.js`
3. Скопіюй його в директорію твого розширення

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

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

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

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

```bash theme={null}
mkdir mellowtel-bundling
cd mellowtel-bundling
npm init -y
npm install mellowtel
```

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

#### Бандлінг Mellowtel з esbuild

Зсередини директорії `mellowtel-bundling`, створи один бандл, який працює як у сервісних працівниках, так і в контент-скриптах:

```bash theme={null}
npx esbuild node_modules/mellowtel/dist/index.js --bundle --format=iife --global-name=Mellowtel --footer:js="globalThis.Mellowtel = Mellowtel.default" --platform=browser --outfile=mellowtel.js --minify --legal-comments=none
```

Ця команда:

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

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

Після виконання команди esbuild, скопіюй згенерований файл у директорію твого розширення:

```bash theme={null}
cp mellowtel.js ../your-extension/
```

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

```bash theme={null}
cd ..
rm -rf mellowtel-bundling
```

Твоя директорія розширення тепер містить зібраний файл Mellowtel, готовий до використання.

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

Незалежно від того, який варіант ти вибрав вище, налаштуй свій `manifest.json`, щоб включити бандл Mellowtel у контент-скрипти:

```json theme={null}
{
  "manifest_version": 3,
  "name": "Назва вашого розширення",
  "version": "1.0",
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["mellowtel.js", "content_script.js"]
    }
  ],
  "permissions": [
    "storage",
    "declarativeNetRequestWithHostAccess"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]
}
```

**Важливо**:

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

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

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

```javascript theme={null}
// background.js
import './mellowtel.js';

(async () => {
    const mellowtel = new Mellowtel("<configuration_key>"); // Замініть на ваш ключ конфігурації
    await mellowtel.initBackground();
})();
```

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

```javascript theme={null}
// content_script.js
// Mellowtel доступний як глобальна змінна з mellowtel.js

(async () => {
  const mellowtel = new Mellowtel("<configuration_key>"); // Замініть на ваш ключ конфігурації
  await mellowtel.initContentScript();
})();
```

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

Щоб протестувати ваше розширення:

1. Перейдіть на `chrome://extensions/` у Chrome (або еквівалент у інших браузерах)
2. Увімкніть "Режим розробника"
3. Натисніть "Завантажити розпаковане" і виберіть папку вашого розширення

Цей підхід дає вам переваги використання Mellowtel без складності налаштування повної системи збірки, як Webpack або Vite.