Реалізація зберігання даних (chrome.storage) у браузерному розширенні

Проблема: дані в розширенні втрачаються або не синхронізуються

При розробці браузерного розширення для Chrome одна з найчастіших помилок — втрата даних при перезапуску service worker або несинхронізація налаштувань між пристроями користувача. Багато початківців покладаються на localStorage, але він не працює в background-скриптах Manifest V3 і не сповіщає про зміни в інших контекстах. У результаті користувач змінює тему на ноутбуці — на десктопі тема залишається старою, а кеш перекладів зникає після 30 секунд бездіяльності. В одному з наших проєктів — розширенні для перекладача з 10 000 активних користувачів — ми зіткнулися з втратою кеша при кожному перезапуску service worker. Рішення виявилося простим: комбінація chrome.storage.sync для налаштувань та chrome.storage.local для кеша. Ми реалізували сховища більш ніж для 50 розширень і маємо 5-річний досвід у цій галузі.

Які проблеми вирішуємо

Несинхронізація налаштувань виникає, коли користувач змінює тему на одному пристрої, а на іншому вона залишається колишньою. chrome.storage.sync автоматично синхронізує дані через обліковий запис Google, ліміт — 100 КБ, але для конфігурації цього вистачає.

Втрата кешу при перезапуску service worker — типова проблема в MV3, оскільки SW вивантажується через 30 секунд бездіяльності. Якщо зберігати кеш у змінних, він зникне. chrome.storage.local або session вирішують проблему.

Відсутність типізації призводить до помилок при читанні даних, особливо при міграції структури. Ми створюємо типізовані обгортки на TypeScript з дефолтними значеннями, що виключає невизначену поведінку.

Як ми реалізуємо сховище: розбір кейсу

Для розширення-перекладача з 10 000 користувачів ми спроєктували систему зберігання: налаштування (тема, мова, авто-переклад) — у chrome.storage.sync, кеш перекладів — у chrome.storage.local з витісненням старих записів при досягненні 8 МБ. Код типізованої обгортки для налаштувань:

// storage/store.ts
type Settings = {
  theme: 'light' | 'dark' | 'system';
  targetLang: string;
  autoTranslate: boolean;
  ignoredDomains: string[];
};

const defaultSettings: Settings = {
  theme: 'system',
  targetLang: 'ru',
  autoTranslate: false,
  ignoredDomains: [],
};

export const settingsStore = {
  async get(): Promise<Settings> {
    const result = await chrome.storage.sync.get('settings');
    return { ...defaultSettings, ...(result.settings ?? {}) };
  },

  async set(partial: Partial<Settings>): Promise<void> {
    const current = await this.get();
    await chrome.storage.sync.set({ settings: { ...current, ...partial } });
  },

  async reset(): Promise<void> {
    await chrome.storage.sync.set({ settings: defaultSettings });
  },

  onChange(callback: (newSettings: Settings) => void): void {
    chrome.storage.onChanged.addListener((changes, area) => {
      if (area === 'sync' && 'settings' in changes) {
        callback({ ...defaultSettings, ...changes.settings.newValue });
      }
    });
  }
};

Завдяки цьому розширення гарантовано зберігає вибір користувача та миттєво реагує на зміни. Кеш займає в середньому 3 МБ, але при необхідності ми впровадили механізм витіснення LRU: видаляємо записи, до яких не зверталися більше 30 днів.

Чому chrome.storage надійніше за localStorage та інші методи?

Відзначимо: як видно, chrome.storage — єдиний варіант для service worker та синхронізації. Згідно з документацією Google, chrome.storage.sync автоматично синхронізує дані (developer.chrome.com).

Процес роботи над вашим розширенням

1. Аналіз: визначаємо типи даних, обсяг (до 10 МБ або більше, якщо потрібно синхронізувати), вимоги до синхронізації та офлайн-режиму.
2. Проєктування: обираємо комбінацію сховищ (local, sync, session, IndexedDB), проєктуємо типізовані обгортки, продумуємо стратегію витіснення (LRU, TTL).
3. Реалізація: пишемо код на TypeScript з повним покриттям unit-тестами (Jest), використовуємо патерн Repository та фабрики для різних типів сховищ.
4. Тестування: перевіряємо поведінку при перезапуску SW, при перевищенні лімітів, при множинних вкладках та одночасних записах.
5. Деплой: публікуємо розширення в Chrome Web Store з повною документацією по API сховища.

Що входить у роботу

• Повний код сховища з типізацією та обгортками (TypeScript).
• Документація по API та архітектурі (README).
• Інструкція з міграції з localStorage (якщо потрібно).
• Навчання команди підтримці та доробкам (1 година консультації).
• Гарантія: ми підтримуємо код протягом 3 місяців після здачі (виправляємо помилки).

Строки та вартість

Строки розробки сховища — від 3 до 10 робочих днів залежно від складності (один тип сховища або комбінація). Вартість розраховується індивідуально після аналізу вимог. Зв'яжіться з нами — отримайте консультацію та попередню оцінку безкоштовно.

Як забезпечити синхронізацію між пристроями?

Для синхронізації налаштувань та інших невеликих даних використовуйте chrome.storage.sync. Ліміт — 100 КБ на все сховище, але для конфігурації цього достатньо. При кожній зміні дані автоматично поширюються на всі пристрої, де встановлено розширення. Якщо потрібно синхронізувати великі обсяги (наприклад, закладки), використовуйте chrome.storage.local з власним сервером синхронізації або хмарним сервісом.

Як підписатися на зміни та уникнути гонок даних?

Використовуйте подію onChanged. Підписка у всіх контекстах розширення дозволяє синхронізувати UI та фонові процеси. Приклад:

chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName !== 'sync') return;
  if ('theme' in changes) {
    const { newValue } = changes.theme;
    applyTheme(newValue);
  }
});

Цей патерн запобігає гонкам даних, оскільки зміни обробляються послідовно.

Додаткові рекомендації

Сховище chrome.storage.sync дозволяє зберігати до 100 КБ даних, при цьому один ключ не може перевищувати 8 КБ. Для великих обсягів використовуйте chrome.storage.local або IndexedDB. Очистити всі дані можна викликом clear(), але врахуйте, що sync очистить дані на всіх пристроях. chrome.storage автоматично серіалізує об'єкти в JSON, тому функції, undefined та символи недопустимі. Для бінарних даних використовуйте IndexedDB або конвертацію в base64 з урахуванням лімітів. При оновленні розширення впроваджуйте версіонування та міграції — зберігайте версію схеми окремо.

Надійне зберігання даних — основа будь-якого розширення. Замовте розробку сховища для вашого проєкту. Зв'яжіться з нами — отримайте консультацію та попередню оцінку.

Фронтенд-розробка 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.

Тестування

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.