Реализация 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 в ваше расширение.