Перейти к содержанию
Разработка

Chrome-расширение для подготовки публикаций постов в социальные сети и Битрикс24

В продолжении автоматизации SMM работы с многоязычным контентом для одного из клиентов было реализовано расширение для браузера Chrome.

Клиент регулярно находил интересные публикации, новости и изображения в зарубежных социальных сетях и на обычных сайтах. Чтобы перенести такой материал в социальные сети или портал Битрикс24, обычно приходится выполнить несколько действий:

  1. Скопировать исходный текст.

  2. Сохранить изображения.

  3. При необходимости перевести текст.

  4. Подготовить краткое описание или собственный комментарий.

  5. Открыть социальную сеть.

  6. Загрузить изображения и собрать публикацию.

  7. Ещё раз проверить результат.

Каждая операция по отдельности занимает немного времени. Но когда это повторяется регулярно, процесс начинает заметно раздражать.

Так появилась идея небольшого Chrome-расширения, которое сокращает весь сценарий до одной последовательности:

страница или публикация → захват текста и изображений → перевод или краткое резюме → генерация текста → редактор → публикация в соцсеть

Не полноценный SMM-сервис

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

В проект не закладывались командная работа, контент-планы, аналитика, массовый постинг и сложное расписание. Основная задача гораздо проще: ускорить подготовку публикаций непосредственно из браузера.

Расширение должно было оставаться локальным, работать без обязательного backend-сервера и не публиковать ничего без явного действия пользователя.

Разработка началась не с кода

Первым этапом стали два документа:

  • AGENTS.md с архитектурными правилами и ограничениями;

  • PLAN.md с пользовательскими сценариями, этапами разработки, рисками и критериями готовности.

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

В документации были заранее определены основные требования:

  • Chrome Manifest V3;

  • локальное хранение настроек и черновиков;

  • отсутствие ключей и токенов в исходном коде;

  • заменяемый AI-провайдер;

  • отдельные модули для работы с AI, VK, Telegram, Битрикс24;

  • ручное подтверждение каждой публикации;

  • обязательные запасные сценарии при ошибках API;

  • русский и английский интерфейс;

  • отсутствие обязательного сервера.

Только после этого началась реализация.

Повторное использование существующих наработок

Проект создавался не полностью с нуля. За основу были взяты архитектурные решения из другого нашего расширения X-AI-Translate.

В частности, удалось повторно использовать общий подход к:

  • Manifest V3 и service worker;

  • настройкам AI-провайдеров;

  • OpenAI-compatible и Claude API;

  • потоковой генерации текста;

  • BYOK, когда пользователь применяет собственный API-ключ;

  • локализации интерфейса;

  • хранению настроек через chrome.storage.local.

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

Что получилось в первой версии

Расширение умеет получать материал несколькими способами:

  • из выделенного текста;

  • из видимой области страницы;

  • из выбранной пользователем области;

  • из основного содержимого обычной страницы;

  • из открытой публикации X или Instagram.

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

В редакторе можно:

  • проверить исходный текст;

  • выполнить перевод;

  • получить краткое резюме;

  • сгенерировать три варианта публикации;

  • выбрать подходящий вариант;

  • отредактировать итоговый текст;

  • удалить ненужные изображения;

  • скопировать текст или скачать фотографии;

  • создать отложенную запись во VK.

Изображения не отправляются AI-модели автоматически. Для использования vision-возможностей это нужно отдельно разрешить в настройках и подтвердить в редакторе.

Интеграция с VK оказалась сложнее генерации текста

AI-функции были наиболее очевидной частью проекта. Намного больше практических вопросов возникло при работе с изображениями и VK API.

Публикация фотографии во VK состоит не из одного запроса. Сначала необходимо получить адрес сервера загрузки, затем отправить изображение, сохранить его через API и только после этого добавить полученное вложение в wall.post.

На практике пришлось учитывать:

  • временную недоступность upload-сервера;

  • частичную загрузку галереи;

  • неверный ответ API;

  • отсутствие необходимых прав у токена;

  • публикацию в личный профиль или сообщество;

  • превышение квоты локального хранилища Chrome;

  • невозможность загрузить изображение с некоторых CDN;

  • риск случайно создать текстовую запись без фотографий.

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

Это важная деталь: автоматизация должна не только работать в удачном сценарии, но и безопасно останавливаться при неполном результате.

Отложенная запись вместо мгновенной публикации

Расширение не публикует запись немедленно. Через VK API создаётся отложенная публикация с будущей датой.

Такой подход оставляет время на финальную проверку непосредственно во VK. Запись можно изменить, перенести или удалить.

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

То есть API-интеграция ускоряет работу, но не является единственной точкой отказа.

Локальная работа без backend

Настройки, API-ключ, VK-токен, текущий черновик и история последних десяти материалов хранятся локально в браузере.

Обязательного backend-сервера в проекте нет. Это упрощает развёртывание, снижает стоимость эксплуатации и уменьшает количество мест, через которые проходят пользовательские данные.

При этом локальная архитектура тоже имеет ограничения. Например, большие изображения быстро достигают квоты chrome.storage.local. Поэтому для истории сохраняются преимущественно URL изображений, а подготовленные бинарные данные используются непосредственно во время текущей публикации.

Роль AI в разработке

Проект разрабатывался с помощью Codex, но это не был сценарий «описал идею одной строкой и получил готовый продукт».

Наша работа заключалась в том, чтобы:

  • определить пользовательский сценарий;

  • зафиксировать границы MVP;

  • выбрать архитектуру;

  • разделить проект на этапы;

  • проверить решения, связанные с безопасностью;

  • тестировать расширение в реальном браузере;

  • находить ошибки интеграции;

  • проводить code review;

  • решать, какие функции действительно нужны.

AI-агент помогал анализировать существующий проект, реализовывать отдельные модули, писать тесты, обновлять документацию и исправлять найденные проблемы.

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

  • сохранению изображений при превышении лимита хранилища;

  • повторной загрузке фотографий после ошибки VK;

  • корректной обработке разрешений Chrome;

  • обновлению списка доступных страниц и сообществ;

  • защите от создания неполной публикации.

Именно на этом этапе AI-прототип постепенно превращается в инструмент, которым действительно можно пользоваться.

Итог

smart-posting-1

smart-posting-2

smart-posting-3

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

Но главный вывод этого проекта не в том, что AI позволяет быстро написать много кода.

Настоящее ускорение появляется тогда, когда разработчик заранее определяет архитектуру и ограничения, а AI используется последовательно: для анализа, реализации, тестирования, code review и исправления реальных ошибок.

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

В отличие от X-AI-Translate и News-Bot данное решение является закрытым и платным и в публичном доступе публикация его в настоящее время не планируется.

Вы можете заказать у нас данное расширение с вашими потребностями и доработками или любое другое

Нужен сайт или приложение?

Обсудим ваш проект бесплатно

Оставить заявку

Мы используем файлы cookie для улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с их использованием.