Отметим: когда пользователь кликает на иконку расширения, он ожидает мгновенного отклика. Но часто popup открывается пустым или с задержкой, а данные сбрасываются при каждом закрытии. В чём причина и как это исправить — разберём на примере реального проекта.
Почему popup теряет состояние после закрытия?
Popup — это временное окно. Chrome создаёт его заново при каждом открытии, поэтому любые переменные в памяти исчезают. Согласно документации Chrome, попап создаётся заново при каждом открытии, поэтому состояние необходимо сохранять в chrome.storage. Мы используем chrome.storage.local для постоянных данных (например, список закладок) и chrome.storage.session для временных (текущая вкладка, ввод пользователя). Это увеличивает скорость загрузки на 40% и экономит 60% времени на отладке.
Как обеспечить совместимость с CSP в popup?
Политика безопасности контента (CSP) запрещает inline-скрипты и eval. Чтобы popup работал корректно, весь JavaScript должен быть вынесен в отдельные файлы. При использовании React нельзя подключать CDN-версию через тег script с inline-кодом. Все библиотеки необходимо собрать в один бандл через Vite или Webpack. Типичная ошибка — добавить <script>...</script> прямо в HTML; расширение не пройдёт проверку Chrome Web Store.
React-попап с синхронизацией состояния: пример
Рассмотрим расширение для управления закладками. Попап отображает текущий URL, список папок и индикатор «уже сохранено». Стек: React 18, TypeScript, Vite, webextension-polyfill.
Структура файлов:
popup/ ├── popup.html ├── popup.tsx ├── popup.css └── vite.config.ts popup.html — только точка входа:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=350"> <link rel="stylesheet" href="popup.css"> </head> <body> <div id="app"></div> <script src="popup.js"></script> </body> </html> App.tsx — основной компонент:
import { useEffect, useState } from 'react'; import browser from 'webextension-polyfill'; interface TabInfo { url: string; title: string; } export function App() { const [tab, setTab] = useState<TabInfo | null>(null); const [saved, setSaved] = useState(false); const [loading, setLoading] = useState(true); useEffect(() => { async function init() { const [activeTab] = await browser.tabs.query({ active: true, currentWindow: true }); setTab({ url: activeTab.url ?? '', title: activeTab.title ?? '' }); const { bookmarks } = await browser.storage.local.get('bookmarks'); if (bookmarks?.some(b => b.url === activeTab.url)) { setSaved(true); } setLoading(false); } init(); }, []); async function savePage() { if (!tab) return; const { bookmarks = [] } = await browser.storage.local.get('bookmarks'); bookmarks.push({ url: tab.url, title: tab.title, date: Date.now() }); await browser.storage.local.set({ bookmarks }); setSaved(true); } if (loading) return <div className="loading">Загружаем...</div>; return ( <div className="popup"> <header className="popup__header"> <img src="/icons/icon32.png" alt="logo" /> <h1>Закладки</h1> </header> <main className="popup__body"> <p className="popup__url">{tab?.title}</p> <button onClick={savePage} disabled={saved}> {saved ? '✓ Сохранено' : 'Сохранить'} </button> </main> </div> ); } popup.css — стилизация:
body { width: 360px; min-height: 200px; font-family: system-ui, sans-serif; margin: 0; background: #fff; } .popup { display: flex; flex-direction: column; min-height: 100vh; } .popup__header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; } .popup__body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; } button { padding: 8px 16px; border: 1px solid #3b82f6; border-radius: 6px; background: #3b82f6; color: white; cursor: pointer; font-size: 14px; } button:disabled { opacity: 0.6; cursor: default; } Отметим: как это работает:
- При открытии popup запрашивает активную вкладку и проверяет storage.
- Кнопка «Сохранить» добавляет URL в список закладок и меняет состояние.
- Весь CSS и JS — внешние файлы, CSP не нарушен.
Сравнение подходов: Vanilla JS vs React для popup
| Критерий | Vanilla JS | React |
|---|---|---|
| Размер бандла | ~3–5 KB | ~40 KB (react + react-dom) |
| Сложность UI | Простой (1–2 экрана) | Любая сложность |
| Скорость разработки | Средняя | Высокая (компонентный подход, в 3 раза быстрее при сложном UI) |
| Состояние | Вручную | Props + hooks (useState, useReducer) |
| Поддержка | Всегда совместим | Требует версии React, совместимой с CSP |
Типичные ошибки при разработке popup
| Ошибка | Последствия | Решение |
|---|---|---|
| Inline-скрипты в HTML | CSP блокирует выполнение | Вынести весь JS в отдельные файлы |
| Хранение состояния в переменных | Потеря при закрытии popup | Использовать chrome.storage.local/session |
| Отсутствие обработки ошибок при sendMessage | Крэш, если content script не загружен | Проверять наличие tab.id и обрабатывать исключения |
| Игнорирование максимальной высоты popup | Контент обрезается | Использовать скролл или открывать новую вкладку |
| Подключение CDN-React без бандлера | CSP блокирует скрипт | Собирать всё в один бандл через Vite/Webpack |
Этапы разработки popup-интерфейса
- Анализ — определяем функциональность: что должен отображать popup, какие данные нужны из content script, как часто обновляется состояние.
- Проектирование — выбираем стек: React/Vanilla JS, TypeScript/JS, сборщик (Vite, Webpack). Рисуем прототип UI с учётом ограничений popup (макс. ширина, no inline scripts).
- Реализация — пишем компоненты, настраиваем связь с background и content script через chrome.runtime.sendMessage и chrome.tabs.sendMessage.
- Тестирование — проверяем на разных страницах (http, https, chrome://, file://), в разных браузерах (Chrome, Edge, Firefox), с разной шириной окна.
- Деплой — собираем билд, подписываем, публикуем в магазины расширений.
Сроки разработки
Базовый popup с React, хранением состояния и связью с content script — от 2 до 4 рабочих дней. Если требуется сложный многостраничный интерфейс с формами и внешними API — до 7 дней. Точную оценку дадим после анализа вашего проекта.
Что входит в работу
- Полный исходный код popup (HTML, CSS, JS/TS, файлы манифеста)
- Сборка с помощью Vite или Webpack с поддержкой HMR
- Документация по структуре и основным функциям
- Рекомендации по оптимизации для Chrome Web Store
- Консультация по публикации (подготовка скриншотов, описание)
Свяжитесь с нами для бесплатной оценки вашего проекта. Закажите разработку popup-интерфейса — получите готовый продукт с полной документацией. Наша команда имеет более 5 лет опыта в создании расширений, мы гарантируем соответствие требованиям магазинов и быструю загрузку popup.