SideBarny LLM Chrome Extension

Розширення Chrome, яке відкриває популярні LLM-чати у бічній панелі та дозволяє швидко захоплювати текст або HTML з будь-якої сторінки й автоматично вставляти в чат провайдера.

Можливості

• Відкриття LLM-чату в бічній панелі по кліку на іконку розширення
• Швидке перемикання між провайдерами без перевідкриття панелі
• Відкриття поточного провайдера у звичайній вкладці (Відкрити у вкладці)
• Вибрати текст: захоплення видимого тексту з обраного блоку сторінки
• Вибрати HTML: захоплення HTML-розмітки обраного блоку
• Вибір елемента у стилі DevTools з підсвіткою при наведенні
• Автоматична вставка захопленого контенту прямо в поле вводу чату провайдера (усі провайдери)
• Фолбек на копіювання в буфер обміну, якщо автовставка недоступна
• Fallback-витяг тексту з ARIA-атрибутів (aria-label, aria-labelledby, aria-describedby, title, alt) для елементів без видимого тексту
• Адаптивна тема під кожного провайдера
• Підтримка prefers-reduced-motion та покращений колірний контраст

Підтримувані провайдери

Провайдер	Автовставка	Метод вставки
OpenAI ChatGPT	+	contenteditable (execCommand)
Anthropic Claude	+	contenteditable (ProseMirror)
Google Gemini	+	contenteditable (Quill editor)
Atlassian Rovo	+	contenteditable (ProseMirror)
Microsoft Copilot	+	textarea (React native setter)
xAI Grok	+	textarea (React native setter)
Poe	+	textarea (React native setter)
HuggingChat	+	textarea (Svelte native setter)

Встановлення

1. Відкрий chrome://extensions/
2. Увімкни Режим розробника
3. Натисни Завантажити розпаковане
4. Обери директорію цього проєкту

Використання

1. Натисни іконку розширення в тулбарі Chrome
2. Відкриється бічна панель з обраним LLM-чатом
3. Обери провайдера у верхньому списку
4. Натисни Вибрати текст або Вибрати HTML
5. Наведи курсор на потрібний блок сторінки і клікни (або Esc для скасування)
6. Контент автоматично вставляється в чат провайдера
7. Якщо провайдер не рендериться у iframe — відкрий його через Відкрити у вкладці

Структура проєкту

sidebarny-extension/
├── manifest.json                  # Конфігурація розширення (MV3)
├── background.js                  # Service worker
├── sidepanel.html                 # UI бічної панелі
├── sidepanel.js                   # Логіка бічної панелі
├── sidepanel.css                  # Стилі з адаптивними темами
├── content.js                     # Content script для захоплення елементів
├── chat-input-injector.js         # Content script для автовставки в чат провайдерів
├── opensearch-dashboard-parser.js # Парсер логів OpenSearch Dashboard
├── rules.json                     # declarativeNetRequest правила (iframe headers)
├── icons/
├── MARKETPLACE_DESCRIPTION_UA.md
└── README.md

Дозволи

Дозвіл	Тип	Призначення
sidePanel	обовʼязковий	Відкриття та керування бічною панеллю
declarativeNetRequest	обовʼязковий	Зняття iframe-обмежень для провайдерів (X-Frame-Options, CSP)
storage	обовʼязковий	Збереження обраного провайдера
activeTab	обовʼязковий	Тимчасовий доступ до активної вкладки для захоплення контенту
scripting	опціональний	Інʼєкція content script (запитується при першому використанні)
<all_urls>	опціональний	Доступ до сторінок для захоплення контексту (запитується при першому використанні)

Дані користувача не відправляються на сторонні сервери. Весь контент обробляється локально.

Про автора

• Роман Маринський
• QA/Test Automation Expert і macOS розробник (11+ років у QA)
• Key Expert @ Intellias QA CoE
• GitHub: rmarinsky
• Сайт: mnfaktr.com

Розробка

1. Внеси зміни у файли
2. Перезавантаж розширення у chrome://extensions/
3. Перевір поведінку у бічній панелі