# Mokosh — Session Capture

Chrome MV3 extension that records operator sessions for bug reports.

Фаза 1 — Локальная запись + экспорт архива

## Установка и запуск

### Разработка

```bash
# Установка зависимостей
npm install

# Сборка для разработки с HMR
npm run dev

# Сборка для продакшена
npm run build
```

### Установка расширения в Chrome

1. Соберите проект:
   ```bash
   npm run build
   ```

2. Откройте Chrome и перейдите по адресу: `chrome://extensions/`

3. Включите "Режим разработчика" (Developer mode) в правом верхнем углу

4. Нажмите кнопку "Загрузить распакованное расширение" (Load unpacked)

5. Выберите папку `dist` в корне проекта

6. Расширение установлено!

## Использование

1. При первом открытии popup расширение запросит разрешение на запись экрана

2. Разрешение обязательно для работы расширения

3. Расширение автоматически начнет запись:
   - Видео: последние 30 секунд (кольцевой буфер)
   - DOM-события через rrweb: последние 10 минут
   - Лог действий пользователя: последние 10 минут

4. Для сохранения отчета об ошибке:
   - Нажмите на иконку расширения
   - Нажмите кнопку "Сохранить отчёт об ошибке"
   - Архив автоматически загрузится в папку "Загрузки"

## Структура архива

Архив `session_report_YYYY-MM-DD_HH-MM-SS.zip` содержит:

```
session_report_2025-05-15_14-32-10.zip
├── video/
│   └── last_30sec.webm         # склеенные чанки видеобуфера
├── rrweb/
│   └── session.json            # массив DOM-событий rrweb
├── logs/
│   └── events.json             # лог действий пользователя
├── screenshot.png              # скриншот в момент сохранения
└── meta.json                   # метаданные сессии
```

## Технический стек

- **Тип расширения**: Chrome Extension, Manifest V3
- **Service Worker**: Background script (Manifest V3)
- **Захват экрана**: `chrome.tabCapture` API
- **Захват DOM**: `rrweb` (npm: rrweb)
- **Лог событий**: Content Script
- **Упаковка архива**: `JSZip` (npm: jszip)
- **Сохранение файла**: `chrome.downloads` API
- **Хранение буфера**: In-memory (Service Worker + Content Script)
- **Build**: Vite + crxjs + TypeScript

## Особенности

### Маскирование чувствительных данных

- Пароли (`input[type=password]`) маскируются автоматически в rrweb и логах
- Поля с атрибутом `data-sensitive="true"` также маскируются в rrweb

### Записываемые события

#### Пользовательские события

- **click** — клик по любому элементу
- **input** — изменение значения поля (без паролей)
- **navigation** — переходы по страницам (popstate, hashchange, History API)
- **js_error** — JavaScript ошибки (window.onerror, unhandledrejection)
- **network_error** — сетевые ошибки (fetch/XHR с кодом ответа >= 400)

### Кольцевой буфер

- **Видео**: 30 секунд, первый чанк (WebM заголовок) хранится всегда
- **rrweb события**: 10 минут, максимум 5000 событий
- **Пользовательские события**: 10 минут

### Память

- Ожидаемое потребление: ~5-10 МБ в фоновом режиме

## Критерии приёмки Фазы 1

- ✅ Расширение устанавливается в Chrome без ошибок
- ✅ Видеобуфер непрерывно работает на любой вкладке
- ✅ В буфере всегда есть не более 30 секунд видео
- ✅ rrweb пишет DOM-события без ошибок на типовых страницах
- ✅ Лог событий фиксирует клики, навигацию и сетевые ошибки
- ✅ При нажатии кнопки архив скачивается в "Загрузки" за < 5 секунд
- ✅ Архив открывается, `last_30sec.webm` воспроизводится в браузере
- ✅ Пароли не попадают в лог и rrweb-снимки
- ✅ RAM-потребление расширения не превышает 50 МБ в фоне

## Отладка

### Console Logs

Расширение пишет подробные логи в консоль:

- **Service Worker**: Chrome DevTools → Extensions → Service Worker → Console
- **Content Script**: Chrome DevTools на любой странице → Console
- **Popup**: Правый клик по popup → Проверить

### Структура проекта

```
ai-call-extension/
├── src/
│   ├── background/          # Service Worker
│   │   └── index.ts
│   ├── content/            # Content Script
│   │   └── index.ts
│   ├── popup/              # Popup UI
│   │   ├── index.html
│   │   ├── index.ts
│   │   └── style.css
│   └── shared/             # Общие типы и утилиты
│       ├── types.ts
│       └── logger.ts
├── icons/                  # Иконки расширения
├── dist/                   # Собранные файлы
├── manifest.json           # Manifest расширения
├── vite.config.ts          # Конфигурация Vite
├── tsconfig.json           # Конфигурация TypeScript
└── package.json
```

## Лицензия

MIT

## Контакты

Для вопросов и предложений обращайтесь в support.