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 или кнопка). Ctrl+Shift+Enter — быстрый промпт: сразу копирует правку в буфер, не добавляя её в общий список.
4. Shift+клик по следующему элементу добавляет его к текущей правке (один текст → несколько элементов).
5. Escape — закрыть форму / выйти из режима.
6. Правки сохраняются в локальное хранилище (переживают перезагрузку страницы), число видно на бейдже иконки.
7. Откройте popup → «Copy all» — получите один запрос вида:

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

--- Правка 1 ---
Страница: http://localhost:5173/
Элемент: `body > main > section > button:nth-of-type(1)` (<button class="cta" «Попробовать бесплатно»>)
Увеличь паддинг и сделай скругление больше
--- Правка 2 ---
Страница: http://localhost:5173/pricing
Элемент 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 — тестовая страница

В планах

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