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
| Характеристика | Popup | Side Panel |
|---|---|---|
| Ширина | 800 px макс. | ~400 px (фиксированная Chrome) |
| Жизненный цикл | До потери фокуса | Постоянная, переживает смену вкладок |
| Контекст вкладки | Привязан к активной | Может быть глобальной или per-tab |
| Доступность | С Chrome 4 | С Chrome 114 |
| Firefox/Safari | Нет аналога | Нет аналога |
Как настроить 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"
}
}
Подробная конфигурация manifest.json
Убедитесь, что указаны все необходимые разрешения. sidePanel разрешение обязательно. Также требуется storage, если вы сохраняете данные. Для доступа к содержимому вкладок добавьте activeTab и scripting.
Открытие панели и 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
| Характеристика | Vanilla JS | React |
|---|---|---|
| Управление состоянием | Ручное | Встроенное (useState) |
| Масштабируемость | Ограничена | Компонентный подход |
| Скорость разработки | Средняя | Высокая (переиспользование) |
Как добавить Side Panel в ваше расширение
- Установите разрешение
sidePanelв manifest.json. - Создайте HTML-файл панели (например, panel.html).
- В сервис-воркере вызовите
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }). - Настройте per-tab логику через
chrome.sidePanel.setOptions. - Подключите 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 в ваше расширение.