Как создать расширение для предпросмотра ссылок в браузере при помощи ИИ-агента

Каждому веб-серферу знакома привычка открывать десятки вкладок ради минутного ознакомления с контентом. Чтобы избавиться от этого неудобства, энтузиаст с помощью ИИ-агента разработал специальную браузерную утилиту Quick Look для ссылок, которая позволяет задействовать быстрый предпросмотр по нажатию клавиши пробела без открытия новой вкладки.

В операционных системах macOS и Windows давно существуют встроенные функции быстрого просмотра файлов по нажатию клавиши Space, однако браузеры до сих пор лишены аналогичной возможности для ссылок. Решением проблемы стало создание пользовательского расширения с привлечением чат-бота Claude.

Как создавалось расширение для предпросмотра ссылок

Постановка задачи ИИ-агенту началась поздним вечером в понедельник. Первичное техническое задание описывало концепцию: при наведении курсора на любую гиперссылку и нажатии пробела должно появляться всплывающее матовое окно с содержимым страницы. Дополнительно оговаривалось использование стрелок на клавиатуре для переключения между ссылками, сочетания Option + Space для развертывания на весь экран и клавиши Return для полноценного открытия.

Список требований безопасности включал запрет на загрузку страниц при простом наведении, блокировку файлов cookie и внешних серверов, а также фильтрацию рискованных ресурсов. Искусственный интеллект предварительно составил план работы, выделив четыре типа предпросмотра: живой режим, режим чтения, сводку и медиаформаты для изображений, видео на YouTube и PDF-файлов.

Исправление ошибок и тестирование кода

Первая версия расширения была написана менее чем за несколько часов и содержала около 4800 строк кода, включая библиотеку Readability от Mozilla для текстового режима. ИИ самостоятельно протестировал разработку в своем окружении, исправив ряд начальных дефектов. Например, превью видео с YouTube выдавали ошибку 153, пока не были добавлены правила для рефереров, а на Википедии стрелки навигации захватывали лишь малую часть ссылок из-за слишком узкой группировки.

Последующий внутренний аудит безопасности выявил уязвимость, при которой сторонние сайты могли встраивать фрейм предпросмотра и управлять им. Эту проблему оперативно устранили. Также потребовалось исправить баг, из-за которого после закрытия окна фокус ввода терялся в скрытом фрейме, блокируя дальнейшую работу клавиши пробела.

Адаптация под проблемные сайты и конфликты горячих клавиш

Во второй итерации разработчик столкнулся с сайтами, нарушающими стандартное поведение фреймов. Поскольку YouTube использует пробел для паузы видео и прокрутки ленты, сочетание клавиш изменили: теперь для активации предпросмотра на большинстве страниц используется Shift + Space, тогда как на самом YouTube, в Google Docs и Figma задействован стандартный пробел.

Веб-версия WhatsApp выдавала ошибку подключения из-за ограничений на встраивание, поэтому ИИ настроил альтернативный метод загрузки фрейма. Инструмент научился распознавать интерактивные кнопки вроде выхода из учетной системы или отписки, выводя предупреждающее уведомление вместо выполнения потенциально опасного действия.

Особенности установки и использования утилиты

Поскольку проект распространяется в виде распакованного расширения через GitHub, его установка требует включения режима разработчика в браузере Chrome или Edge. При выборе параметра доступа ко всем сайтам браузер выводит стандартное предупреждение о чтении и изменении данных, так как функция предпросмотра требует обращения к внешним ресурсам.

Пользователи Windows могут использовать клавишу Ctrl вместо Cmd или перенастроить шорткат на Ctrl + Space в параметрах, чтобы приблизить управление к функционалу утилит вроде PowerToys Peek. Проект демонстрирует возможности быстрой разработки программного обеспечения с помощью современных языковых моделей при условии точного описания задач и детального разбора возникающих ошибок.