Реалізація Side Panel браузерного розширення (Chrome) під ключ

Popup-вікна Chrome-розширень закриваються при кліку поза ними — це критично для інструментів, що потребують постійного доступу. Side Panel API вирішує цю проблему, надаючи постійну бічну панель. Користувачі розширень для нотаток, моніторингу або devtools часто втрачають дані при випадковому закритті Popup. Side Panel залишається відкритою, зберігаючи стан при перемиканні вкладок. Ми реалізуємо такі панелі під ключ за 3–9 днів. Оцінимо ваш проєкт — зв'яжіться з нами. Наш досвід з Chrome API — понад 5 років, гарантуємо підтримку після запуску. Отримайте консультацію щодо інтеграції.

Згідно з Side Panel API, панель може бути налаштована для кожної вкладки індивідуально. В одному з проєктів ми замінили Popup на Side Panel для CRM-розширення. Користувачі перестали втрачати активні замовлення при перемиканні вкладок, час роботи з розширенням зріс на 40%.

Як Side Panel вирішує проблему втрати контексту?

Popup живе, поки активна вкладка і користувач не клікнув поза вікном. Side Panel залишається відкритою при перемиканні вкладок і навіть при роботі в іншому вікні. Це критично для DevTools-подібних розширень, моніторингу, нотаток і чатів. Перемикання між вкладками не потребує перезавантаження панелі — дані зберігаються в пам'яті.

Відмінності Side Panel від Popup

Як налаштувати Side Panel для різних вкладок?

Панель може бути різною для кожної вкладки або спільною для всіх. Це задається через chrome.sidePanel.setOptions з параметром tabId. Наприклад, для GitHub відображаємо панель із завданнями, для Figma — з коментарями, для решти — вимикаємо. Економія ресурсів: панель не завантажується на непотрібних сайтах.

Підключення в Manifest V3

{ "manifest_version": 3, "name": "My Side Panel Extension", "version": "1.0.0", "permissions": ["storage", "tabs", "activeTab", "scripting", "sidePanel"], "background": { "service_worker": "background.js" }, "action": { "default_icon": "icons/icon48.png", "default_title": "Відкрити панель" }, "side_panel": { "default_path": "panel/panel.html" } } 

Відкриття панелі та per-tab логіка (повний background.js)

// background.js — об'єднаний Service Worker // Відкриття по кліку на іконку chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(console.error); // Per-tab панелі (різні для GitHub і Figma) chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => { if (info.status !== 'complete') return; if (tab.url?.includes('github.com')) { await chrome.sidePanel.setOptions({ tabId, path: 'panel/github-panel.html', enabled: true }); } else if (tab.url?.includes('figma.com')) { await chrome.sidePanel.setOptions({ tabId, path: 'panel/design-panel.html', enabled: true }); } else { await chrome.sidePanel.setOptions({ tabId, enabled: false }); } }); // Постійне з'єднання з Side Panel через Port const sidePanelPorts = new Map(); chrome.runtime.onConnect.addListener((port) => { if (port.name !== 'side-panel') return; chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => { sidePanelPorts.set(tab.id, port); port.onDisconnect.addListener(() => sidePanelPorts.delete(tab.id)); }); }); // Пересилання повідомлень від content script у панель chrome.runtime.onMessage.addListener((msg, sender) => { if (msg.type === 'SELECTION_CHANGED') { const port = sidePanelPorts.get(sender.tab?.id); port?.postMessage({ type: 'SELECTION_CHANGED', text: msg.text }); } }); // Відстеження зміни вкладок chrome.tabs.onActivated.addListener(async ({ tabId }) => { const tab = await chrome.tabs.get(tabId); const port = sidePanelPorts.get(tabId); port?.postMessage({ type: 'PAGE_CHANGED', url: tab.url, title: tab.title }); }); chrome.tabs.onUpdated.addListener((tabId, info, tab) => { if (info.status !== 'complete') return; const port = sidePanelPorts.get(tabId); port?.postMessage({ type: 'PAGE_CHANGED', url: tab.url, title: tab.title }); }); 

React-додаток у Side Panel

Структура panel/panel.html аналогічна Popup, але має більше простору. Ми використовуємо React для побудови інтерфейсу — це дозволяє перевикористовувати компоненти та спрощує підтримку.

// panel/App.tsx import { useEffect, useState, useRef } from 'react'; import browser from 'webextension-polyfill'; export function SidePanel() { const [notes, setNotes] = useState<string[]>([]); const [currentUrl, setCurrentUrl] = useState(''); const portRef = useRef<browser.Runtime.Port | null>(null); useEffect(() => { portRef.current = browser.runtime.connect({ name: 'side-panel' }); portRef.current.onMessage.addListener((msg) => { if (msg.type === 'PAGE_CHANGED') { setCurrentUrl(msg.url); loadNotesForUrl(msg.url); } if (msg.type === 'SELECTION_CHANGED') { handleNewSelection(msg.text); } }); browser.tabs.query({ active: true, currentWindow: true }).then(([tab]) => { if (tab.url) { setCurrentUrl(tab.url); loadNotesForUrl(tab.url); } }); return () => portRef.current?.disconnect(); }, []); async function loadNotesForUrl(url: string) { const domain = new URL(url).hostname; const { notes } = await browser.storage.local.get(`notes_${domain}`); setNotes(notes ?? []); } async function addNote(text: string) { const domain = new URL(currentUrl).hostname; const updated = [...notes, text]; setNotes(updated); await browser.storage.local.set({ [`notes_${domain}`]: updated }); } return ( <div className="side-panel"> <header className="side-panel__header"> <h2>Нотатки</h2> <span className="side-panel__url">{new URL(currentUrl).hostname}</span> </header> <div className="side-panel__notes"> {notes.map((note, i) => ( <div key={i} className="note">{note}</div> ))} </div> <NoteInput onAdd={addNote} /> </div> ); } 

Зв'язок з Content Script через Port

Side Panel живе довго — зручно використовувати постійні з'єднання замість разових sendMessage. Content script відстежує виділення тексту та відправляє його в background, який пересилає в панель.

// content.js — стежить за виділенням тексту document.addEventListener('mouseup', () => { const selection = window.getSelection()?.toString().trim(); if (selection && selection.length > 3) { chrome.runtime.sendMessage({ type: 'SELECTION_CHANGED', text: selection }); } }); 

Чому варто обрати React для Side Panel?

React дозволяє розбити інтерфейс на компоненти, легко керувати станом та перевикористовувати логіку. У комбінації з Port API ми отримуємо реактивну панель, яка миттєво реагує на дії користувача на сторінці. Наприклад, при виділенні тексту на сторінці панель одразу відображає його — затримка менше 50 мс. Side Panel споживає менше пам'яті, ніж фонові сторінки, і не впливає на LCP. Ми оптимізуємо завантаження: bundle splitting, tree-shake, мініфікація React компонентів. Час відкриття панелі — менше 200 мс.

Порівняння: React vs vanilla JS для Side Panel

Як додати Side Panel у ваше розширення

1. Встановіть дозвіл sidePanel у manifest.json.
2. Створіть HTML-файл панелі (наприклад, panel.html).
3. У сервіс-воркері викличте chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).
4. Налаштуйте per-tab логіку через chrome.sidePanel.setOptions.
5. Підключіть React та налаштуйте Port API для зв'язку з контентом.

Що входить у роботу?

• Архітектура та конфігурація Manifest V3
• Реалізація Side Panel з React (або іншим фреймворком)
• Налаштування per-tab логіки (різні панелі для різних сайтів)
• Інтеграція з Content Script через Port API
• Зберігання даних у chrome.storage
• Тестування та оптимізація (Core Web Vitals, LCP, CLS)

Терміни

Базова Side Panel з React, постійним з'єднанням до background, синхронізацією з вкладками та зберіганням даних — 3–5 робочих днів. Панель з реалтайм-взаємодією з вмістом сторінки, історією та пошуком — 6–9 днів. Вартість розраховується індивідуально.

Оцінимо ваш проєкт — зв'яжіться з нами. Гарантуємо підтримку після запуску та фіксацію багів протягом 30 днів. Отримайте консультацію щодо інтеграції Side Panel у ваше розширення.