Реалізація зберігання даних (chrome.storage) у браузерному розширенні
chrome.storage — єдиний надійний спосіб зберігати дані у розширенні. localStorage технічно доступний у popup та options page, але не у service worker, і не синхронізується між контекстами розширення. chrome.storage працює везде.
Три типи сховищ
chrome.storage.local — зберігається локально, до 10 МБ (без дозволу unlimitedStorage). Основний вибір для кешованих даних, контенту користувача.
chrome.storage.sync — синхронізується між пристроями користувача через Google акаунт, до 100 КБ / 8 КБ на ключ. Для налаштувань.
chrome.storage.session — тільки в пам'яті, очищається при закритті браузера. У MV3 — для тимчасового стану SW, який переживає його перезапуск (на відміну від змінних), але не переживає перезапуск браузера.
Базові операції
// Запис
await chrome.storage.local.set({
userData: { id: 42, name: 'Alex' },
lastFetch: Date.now(),
items: [1, 2, 3]
});
// Читання з дефолтними значеннями
const result = await chrome.storage.local.get({
userData: null,
lastFetch: 0,
items: []
});
console.log(result.userData); // { id: 42, name: 'Alex' } або null
// Читання за ключем
const { settings } = await chrome.storage.sync.get('settings');
// Видалення
await chrome.storage.local.remove(['lastFetch', 'tmpData']);
// Повна очистка
await chrome.storage.local.clear();
Підписка на зміни
chrome.storage.onChanged.addListener((changes, areaName) => {
if (areaName !== 'sync') return;
if ('theme' in changes) {
const { oldValue, newValue } = changes.theme;
console.log(`Тема змінена: ${oldValue} → ${newValue}`);
applyTheme(newValue);
}
});
Це працює у всіх контекстах розширення — content script теж отримає подію, якщо підписаний.
Утиліта типізованого сховища
У реальному розширенні зручно зробити типізовану обгортку:
// storage/store.ts
type Settings = {
theme: 'light' | 'dark' | 'system';
targetLang: string;
autoTranslate: boolean;
};
const defaultSettings: Settings = {
theme: 'system',
targetLang: 'uk',
autoTranslate: false,
};
export const settingsStore = {
async get(): Promise<Settings> {
const result = await chrome.storage.sync.get('settings');
return { ...defaultSettings, ...result.settings };
},
async set(settings: Settings): Promise<void> {
await chrome.storage.sync.set({ settings });
},
};
Терміни
Просте get/set: 1 день. Складне сховище з listeners, міграціями: 2–3 дні.