> ## 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 в ваше расширение Plasmo

> Краткое руководство по интеграции Mellowtel в ваше браузерное расширение Plasmo

Здесь вы узнаете, как монетизировать ваше браузерное расширение Plasmo, интегрируя Mellowtel. Ориентировочное время выполнения: 5-15 минут.

# Ручная установка

Если у вас уже есть проект Plasmo, выполните следующие шаги, чтобы добавить интеграцию Mellowtel.

### Установка зависимостей

Сначала добавьте пакет Mellowtel в ваш проект:

```bash theme={null}
pnpm add mellowtel
```

### Настройка package.json

Обновите ваш `package.json`, чтобы включить необходимые разрешения:

```json theme={null}
{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}
```

### Установка переменных окружения

Создайте или обновите ваш файл `.env`:

```plaintext theme={null}
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
```

<Warning>
  Убедитесь, что заменили `your_mellowtel_api_key_here` на ваш актуальный API-ключ Mellowtel из панели управления.
</Warning>

# Реализация

### Настройка фонового скрипта

Создайте или измените ваш фоновый скрипт (`background.ts`):

```typescript theme={null}
import Mellowtel from "mellowtel"

let mellowtel;

(async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  await mellowtel.initBackground()
})()

// Обработка установки и обновлений
chrome.runtime.onInstalled.addListener(async function (details) {
  console.log("Расширение установлено или обновлено", details)
  await mellowtel.generateAndOpenOptInLink()
})
```

### Настройка контентного скрипта

Создайте или измените ваш контентный скрипт (`content.ts`):

```typescript theme={null}
import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"

let mellowtel;

// Настройка поведения контентного скрипта
export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_start"
}

const start = async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  const resp = await mellowtel.initContentScript()
}

start()
```

### Реализация всплывающего окна

Создайте или измените ваш компонент всплывающего окна (`popup.tsx`):

```typescript theme={null}
import Mellowtel from "mellowtel"

const Popup: React.FC = () => {
  const handleMellowtelSettings = async () => {
    const mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
    const link = await mellowtel.generateSettingsLink()
    chrome.tabs.create({ url: link })
  }

  return (
    <div>
      <button onClick={handleMellowtelSettings}>
        Изменить настройки Mellowtel
      </button>
    </div>
  )
}

export default Popup
```

# Команды для разработки

Используйте эти команды во время разработки:

```bash theme={null}
# Запуск сервера разработки
pnpm dev

# Сборка для продакшена
pnpm build

# Упаковка расширения
pnpm package
```

<Accordion title="Лучшие практики разработки">
  1. Всегда тщательно тестируйте ваше расширение как в среде разработки, так и в продакшене
  2. Следите за консолью на предмет предупреждений или ошибок, связанных с Mellowtel
  3. Тестируйте процесс согласия с точки зрения пользователя
  4. Убедитесь, что ссылка на настройки работает правильно
  5. Убедитесь, что все разрешения настроены правильно
</Accordion>

# Тестирование

Перед отправкой вашего расширения:

1. Проверьте процесс установки
2. Убедитесь, что процесс согласия работает
3. Проверьте доступность страницы настроек
4. Подтвердите, что все разрешения работают правильно
5. Тестируйте на разных браузерах, если нацелены на несколько платформ

<Note>
  Для получения дополнительной информации о функциях и API Mellowtel посетите [Quickstart](https://docs.mellowtel.com/browser-plugins/quickstart).
</Note>

Нужна помощь? Присоединяйтесь к нашему [сообществу в Discord](https://discord.com/invite/txAZp4MSDe) для поддержки.