React для popup-интерфейса браузерного расширения: CSP, состояние, связь

Отметим: когда пользователь кликает на иконку расширения, он ожидает мгновенного отклика. Но часто 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

Типичные ошибки при разработке popup

Этапы разработки popup-интерфейса

1. Анализ — определяем функциональность: что должен отображать popup, какие данные нужны из content script, как часто обновляется состояние.
2. Проектирование — выбираем стек: React/Vanilla JS, TypeScript/JS, сборщик (Vite, Webpack). Рисуем прототип UI с учётом ограничений popup (макс. ширина, no inline scripts).
3. Реализация — пишем компоненты, настраиваем связь с background и content script через chrome.runtime.sendMessage и chrome.tabs.sendMessage.
4. Тестирование — проверяем на разных страницах (http, https, chrome://, file://), в разных браузерах (Chrome, Edge, Firefox), с разной шириной окна.
5. Деплой — собираем билд, подписываем, публикуем в магазины расширений.

Сроки разработки

Базовый popup с React, хранением состояния и связью с content script — от 2 до 4 рабочих дней. Если требуется сложный многостраничный интерфейс с формами и внешними API — до 7 дней. Точную оценку дадим после анализа вашего проекта.

Что входит в работу

• Полный исходный код popup (HTML, CSS, JS/TS, файлы манифеста)
• Сборка с помощью Vite или Webpack с поддержкой HMR
• Документация по структуре и основным функциям
• Рекомендации по оптимизации для Chrome Web Store
• Консультация по публикации (подготовка скриншотов, описание)

Свяжитесь с нами для оценки вашего проекта. Закажите разработку popup-интерфейса — получите готовый продукт с полной документацией. Наша команда имеет более 5 лет опыта в создании расширений, мы гарантируем соответствие требованиям магазинов и быструю загрузку popup.