# Fixtape

Браузерный экстеншн (Chrome, MV3), упрощающий постановку правок ИИ-агенту при
разработке фронтенда: выбираете элемент на странице, пишете правку — к ней
автоматически прикрепляется контекст элемента (CSS-селектор, тег, текст).
Все правки копятся в «микстейп» и копируются одним структурированным запросом.

## Установка

1. Открыть `chrome://extensions`
2. Включить «Режим разработчика»
3. «Загрузить распакованное расширение» → выбрать папку проекта

Для страниц `file://` дополнительно включите «Разрешить доступ к URL файлов»
на карточке экстеншена.

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

1. **Включить режим выбора**: `Alt+Shift+Q` или кнопка «Pick mode» в popup
   (клик по иконке экстеншена). Комбинацию можно сменить в
   `chrome://extensions/shortcuts`.
2. Наведите курсор — элемент подсвечивается, рядом метка с тегом.
3. **Клик** по элементу открывает форму — опишите правку, сохраните
   (`Ctrl+Enter` или кнопка).
4. **Shift+клик** по следующему элементу добавляет его к текущей правке
   (один текст → несколько элементов).
5. `Escape` — закрыть форму / выйти из режима.
6. Правки сохраняются в локальное хранилище (переживают перезагрузку
   страницы), число видно на бейдже иконки.
7. Откройте popup → «Copy all» — получите один запрос вида:

```
Общий контекст: страница http://localhost:5173/. Ниже набор отдельных правок; селектор указывает на целевой элемент.

--- Правка 1 ---
Элемент: `body > main > section > button:nth-of-type(1)` (<button class="cta" «Попробовать бесплатно»>)
Увеличь паддинг и сделай скругление больше
--- Правка 2 ---
Элемент 1: `#root > header > nav > a:nth-of-type(2)` (<a class="nav-link" «Тарифы»>)
Элемент 2: `#root > header > nav > a:nth-of-type(3)` (<a class="nav-link" «Документация»>)
Сделай обе ссылки крупнее
```

Режим остаётся включённым после сохранения — можно сделать несколько правок
за один проход.

## Файлы

- `manifest.json` — манифест MV3
- `src/content.js` — режим выбора, подсветка, форма (Shadow DOM), сохранение
- `src/background.js` — горячая клавиша, бейдж
- `src/popup.*` — список правок, копирование, очистка
- `test/page.html` — тестовая страница

## В планах

- Скриншот выбранного элемента, прикреплённый к правке
- Более богатый контекст (компьютед-стили)