Реалізація зберігання даних (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 та інші методи?
| Характеристика | localStorage | chrome.storage.local | chrome.storage.sync | IndexedDB |
|---|---|---|---|---|
| Доступний у SW | Ні | Так | Так | Ні (потрібна обгортка) |
| Синхронізація | Ні | Ні | Так (через Google) | Ні |
| Ліміт | ~5-10 МБ | 10 МБ (до 1 ГБ з дозволом) | 100 КБ | Обмежений диском |
| Сповіщення про зміни | Ні | Так (onChanged) | Так | Ні |
Відзначимо: як видно, chrome.storage — єдиний варіант для service worker та синхронізації. Згідно з документацією Google, chrome.storage.sync автоматично синхронізує дані (developer.chrome.com).
| Ліміт | storage.local | storage.sync | storage.session |
|---|---|---|---|
| Стандартний | 10 МБ | 100 КБ | Обмежений пам'яттю |
| З дозволом unlimitedStorage | до 1 ГБ | — | — |
Процес роботи над вашим розширенням
- Аналіз: визначаємо типи даних, обсяг (до 10 МБ або більше, якщо потрібно синхронізувати), вимоги до синхронізації та офлайн-режиму.
- Проєктування: обираємо комбінацію сховищ (local, sync, session, IndexedDB), проєктуємо типізовані обгортки, продумуємо стратегію витіснення (LRU, TTL).
- Реалізація: пишемо код на TypeScript з повним покриттям unit-тестами (Jest), використовуємо патерн Repository та фабрики для різних типів сховищ.
- Тестування: перевіряємо поведінку при перезапуску SW, при перевищенні лімітів, при множинних вкладках та одночасних записах.
- Деплой: публікуємо розширення в 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 з урахуванням лімітів. При оновленні розширення впроваджуйте версіонування та міграції — зберігайте версію схеми окремо.
Надійне зберігання даних — основа будь-якого розширення. Замовте розробку сховища для вашого проєкту. Зв'яжіться з нами — отримайте консультацію та попередню оцінку.