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.

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

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

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

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

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

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

Обновите ваш package.json, чтобы включить необходимые разрешения: 
{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}

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

Создайте или обновите ваш файл .env: 
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
Убедитесь, что заменили your_mellowtel_api_key_here на ваш актуальный API-ключ Mellowtel из панели управления.

​
Реализация

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

Создайте или измените ваш фоновый скрипт (background.ts): 
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): 
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): 
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

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

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

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

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

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

Перед отправкой вашего расширения:
  1. Проверьте процесс установки
  2. Убедитесь, что процесс согласия работает
  3. Проверьте доступность страницы настроек
  4. Подтвердите, что все разрешения работают корректно
  5. Тестируйте на разных браузерах, если нацелены на несколько платформ
Для получения дополнительной информации о функциях и API Mellowtel посетите Quickstart.
Нужна помощь? Присоединяйтесь к нашему сообществу в Discord для поддержки.