Зауважте: коли користувач клікає на іконку розширення, він очікує миттєвого відгуку. Але часто 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="uk">
<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.
Фронтенд-розробка React: від аудиту до production
Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.
Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.
Чому Next.js — стандартний вибір для SEO?
React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.
Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.
Як TypeScript запобігає багам у продакшені?
TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.
Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.
Vue 3 + Nuxt 3 — альтернативний стек для SSR
Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.
Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.
Продуктивність: метрики та інструменти
Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.
Динамічні імпорти для важких компонентів:
const RichEditor = dynamic(() => import('@/components/RichEditor'), {
ssr: false,
loading: () => <EditorSkeleton />,
});
Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.
Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.
State management: без овериніжирингу
Для більшості додатків достатньо:
-
React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
-
Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
-
React Hook Form — для форм
Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.
CSS та дизайн-система
Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки.
React DevTools Profiler — офіційний інструмент від команди React.
Тестування
| Рівень |
Інструмент |
Що тестуємо |
| Unit |
Vitest |
Утиліти, хуки, чисті функції |
| Component |
Testing Library |
Рендер, взаємодії |
| E2E |
Playwright |
Критичні користувацькі флоу |
| Visual |
Chromatic (Storybook) |
Регресія UI |
E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.
Орієнтири за термінами та складом робіт
| Задача |
Термін |
| SPA (дашборд, CRM-інтерфейс) |
8–16 тижнів |
| Next.js сайт з SSR/ISR |
6–14 тижнів |
| Frontend для існуючого API |
4–10 тижнів |
| Компонентна бібліотека |
6–12 тижнів |
Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.
Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.
У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.
Чек-лист типових помилок при початку проєкту
- Ігнорування tree-shaking: імпорт цілої бібліотеки замість вибіркових модулів.
- Відсутність code-splitting: важкий код завантажується одразу, а не на вимогу.
- Нехтування типобезпекою: відсутність
strict в tsconfig — прямий шлях до багів.
- Надмірна мемоізація:
useMemo та useCallback там, де вони не потрібні.
- Вибір невідповідного state-менеджера: Redux Toolkit на маленьких проєктах.
Який стек обрати для фронтенд-розробки React?
Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.
Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.
