Дорабатываем чужие сайты: Как написать расширение для Chrome с помощью ChatGPT

Часто ли вы сталкиваетесь с такой ситуацией: вы пользуетесь каким-нибудь веб-сервисом и вам очень не хватает какой-то маленькой, но важной функции, которую разработчик не станет добавлять только для вас? С такой проблемой ко мне пришли коллеги из команды поддержки — пользователи присылают в чат на сайте номер заказа и чтобы посмотреть информацию о нём, нужно скопировать номер в буфер, вставить в бэкофисе и запустить поиск. Чтобы упростить процесс, я за 15 минут собрал плагин для Chrome, который превращает номера заказов в активные ссылки. Теперь открыть заказ можно одним кликом.

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

Создаём структуру

Начинаем общение с ChatGPT с общего описания будущего расширения и просьбой подготовить структуру и файлы. Мой запрос выглядел так:

Помоги мне написать расширение для Google Chrome. Оно будет расширять возможности сервиса онлайн-чатов https://example.io и оборачивать номера заказов в ссылки на страницу в другом домене. Начнём с обёртки, сделай общую структуру и файлы.

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

Следующий этап — подготовка иконок, для расширения нужны иконки 16х16, 48х48 и 128х128. Можно взять что-то с бесплатных сайтов (например, icons8 или flaticon) или попросить сгенерировать ChatGPT (но результат не всегда получается нормальным).

Создаём каталог, сохраняем в него все файлы, которые сделал ChatGPT, добавляем иконки и можем попробовать подключить наш пока пустой плагин в Chrome. Открываем chrome://extensions/ в новой вкладке и нажимаем кнопку “Загрузить распакованное расширение”, выбираем каталог и следим, не появились ли какие-то ошибки. Если есть ошибки — копируем их текст в ChatGPT и просим исправить.

Добавляем функциональность

Чтобы ChatGPT правильно реализовал функциональность, нужно хорошо сформулировать задачу. Если вам нужно манипулировать отображением содержимого, формулировки должны включать в себя описание элементов страницы и действий которые нужно с ними выполнять. Например, для нашего чата переходим нужную страницу с диалогами, открываем инструменты разработчика и с помощью селектора выбираем нужный элемент страницы:

Поднимаемся на уровень выше и видим, что все диалоги имеют общий класс message-text, формулируем задачу для ChatGPT:

Нужно обернуть идентификатор заказа в ссылку. Для этого надо найти текст внутри всех div-элементов с классом message-text. Внутри могут быть другие div и надо пройтись по всем дочерним элементам. На странице регулярно появляются новые сообщения, поэтому нужен механизм перезапуска с заменой новых найденных ссылок. Ищем текст формата 7 цифр подряд, например 58293034 и меняем их на ссылку вида https://example.io/admin/?findOrder=…, вместо … подставляем идентификатор. Ссылка должна открываться в новом окне.

На этот запрос ChatGPT выдаст обновлённое содержимое JS-файлов, заменяем файлы в каталоге и в управлении расширениями в Chrome нажимаем кнопку “Обновить” на странице расширения. Проверяем, как работает модуль. Если находим ошибки, сообщаем об этом ChatGPT. В нашем примере часть ссылок не оборачивалась, а другие на каждое обновление страницы оборачивались повторно, поэтому делаем ещё один подход:

Нужно избежать двойного оборачивания в ссылку, то есть если идентификатор уже сделан ссылкой не нужно ещё раз его переделывать. И не работает оборачивание для следующего примера разметки:

<div data-v-29a59df6=»» class=»message-text message-text_user»><div data-v-29a59df6=»» class=»message-text__inner»>Посмотрите что с заказом 3918249</div></div>

Итерации исправления можно повторять, пока ChatGPT не выдаст полностью работающую версию расширения.

Усложняем задачу

Если ваша задача сложнее простой манипуляции внешним видом сайта, с помощью ChatGPT сделать и более сложные сценарии. Для онлайн-чата я дополнительно сделал механизм, который при выборе шаблона ответа автоматически проставляет теги к диалогу. Чтобы реализовать такую логику, нужно найти точки, за которые может “зацепиться” расширение. В примере с чатом — нажимаем на выбор шаблона ответа и смотрим интерфейс, в нём нет никаких изменений, которые можно было распознать. Переключаемся на вкладку Network в инструментах разработчика и видим, что выбор шаблона инициирует отправку запроса на сбор аналитики:

Этот запрос удобно перехватить и использовать как точку входа для дальнейших действий. А ещё в запросе есть информация о названии шаблона в которое можно встроить информацию о нужном теге.

Следующий шаг — разобраться как на сервер передаётся тег. Делаем это действие в интерфейсе и видим запрос:

Вырисовывается алгоритм работы — перехватываем запросы аналитики, находим те, что сообщают об использовании шаблона, вытаскиваем название и генерируем запрос на сервер для установки тега.

Промпт к ChatGPT выглядел следующим образом:

Нужно ловить HTTP-запросы сделанные страницей и если это POST запрос к адресу https://example.io/events, если в запросе event соответствует “Диалоги — вставил сохранённый ответ”, нужно взять из запроса параметр params[’Название ответа’]. В названии ответа нужно взять часть после # (например, если там “abc def#hij”, нужно взять “hij”) и назвать её tag_name. Затем выполнить POST-запрос к адресу https://example.io/tag и передать параметр tag_name, дополнительно передать параметры random_id со случайным числом, id_as_string всегда true и app со значением 0000. Дополнительно к этому запросу нужно добавить заголовок Authorization с телом “Token XXX”, где вместо XXX подставляется содержимое cookie с именем auth_token

Решение от ChatGPT может не сработать с первого раза, иногда нейросеть может допускать ошибки в манифест-файле или коде. Например, у меня ChatGPT неожиданно в одной из итераций изменила версию манифеста на 2 и Chrome отказался запускать расширение. Когда такое происходит, опишите в промпте ошибку и попробуйте новое решение, которое получите в ответ. Если оно не работает — попробуйте перегенерить ответ прежде чем отправлять новые промпты.

Распространение расширения

Если вы захотите поделиться расширением с вашей командой или со всем миром, есть два варианта распространения:

1. Самостоятельная дистрибьюция — вы можете опубликовать все файлы расширения и пользователи установят его таким же образом, через кнопку “Загрузить распакованное расширение”. Этот метод не требует дополнительных затрат, но он сложнее для пользователей и они не смогут автоматически получать обновления.

2. Публикация в интернет-магазине Chrome — расширение может быть публичным и находиться поиском в магазине, или приватным с доступом для конкретных пользователей или по ссылке. Обновление версии можно производить централизованно.

Чтобы опубликовать расширение откройте личный кабинет разработчика. Регистрация платная и стоит единоразово $5, без регулярных платежей. Чтобы добавить расширение, вам нужно запаковать директорию с расширением в ZIP-архив, нажать “Добавить продукт” и загрузить файл. После этого укажите описание расширения, загрузите логотип, скриншоты, заполните остальные поля и отправьте расширение на модерацию. Если вы делаете приватное расширение, качество описания и скриншотов не повлияет на модерацию и можно с этим не заморачиваться.

В среднем процесс проверки занимает 1-2 дня. Если модераторы напишут вам какие-то технические замечания, попросите ChatGPT исправить их и загрузите новую версию на проверку.

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