Предыстория проекта
В предыдущей статье я рассказал о создании расширения для браузера LinkedIn Secret Weapon, которое было полностью разработано с помощью инструмента Claude Code. Я не имел опыта разработки расширений, но благодаря искусственному интеллекту смог создать работающее приложение.
Теперь пришло время расширить функционал расширения, добавив серверную часть для хранения действий пользователя. Для этого я решил попробовать перенести проект на современные инструменты фронтенда: Preact, Tailwind CSS, TypeScript и Vite.
Почему именно Preact?
Первоначально я планировал использовать React, однако меня беспокоило возможное увеличение нагрузки на расширение, так как оно должно быть легким и быстрым. Поэтому я выбрал Preact — легкую альтернативу React с тем же современным API, которая весит всего около 3 КБ.
Процесс миграции
Для выполнения задачи я обратился за помощью к AI-инструменту Claude. Вот что он сделал:
Этап 1: Настройка окружения
Claude настроил следующие компоненты:
- Vite — инструмент сборки современного фронтенд-приложения;
- CRXJS — библиотека для создания расширений браузеров;
- TypeScript — язык программирования для статической типизации кода;
- Preact — альтернатива React с меньшим размером библиотеки;
- Tailwind CSS — фреймворк для быстрого прототипирования интерфейсов.
Этап 2: Миграция компонентов
На этом этапе были перенесены все части приложения (контент, фоновые скрипты и настройки) на TypeScript.
Этап 3: Исправление конфигурации
Здесь была проведена настройка конфигураций Vite и Tailwind для корректной работы проекта.
Однако после завершения этих этапов приложение не запустилось. Проблема заключалась в том, что манифест расширения пытался импортировать файлы TypeScript напрямую, что невозможно сделать стандартными средствами.
Проблемы и их решение
Несмотря на то, что AI указал на проблему, предложенные им решения оказались неэффективны. Например, он рекомендовал запускать сборку через команду npm run build -- --watch, что явно не решало вопрос импорта файлов TypeScript.
Мне пришлось самостоятельно разобраться с этим вопросом, изучив файл манифеста и конфигурацию Vite. Оказалось, что необходимо настроить правильный путь к файлам TypeScript, чтобы они могли компилироваться перед запуском расширения.
Итоговый результат
После исправлений приложение успешно заработало на новой стеке технологий. Теперь у меня есть возможность развивать его дальше, добавляя новые функции и улучшая производительность.