Реалізація Cross-device Sync у браузерному розширенні
Cross-device sync дозволяє налаштуванням та даним розширення користувача слідувати за ним на всіх пристроях, де він авторизований з одним і тим же Google/Microsoft акаунтом. Це автоматично для chrome.storage.sync у Chrome, але потребує явної реалізації у Firefox та Edge.
Chrome: автоматична синхронізація
chrome.storage.sync автоматично синхронізує дані на всіх Chrome-інстанціях одного користувача:
// background.js
chrome.runtime.onInstalled.addListener(async () => {
const defaults = {
theme: 'system',
highlightColor: '#fbbf24',
shortcuts: {},
};
await chrome.storage.sync.set(defaults);
});
// Слухати зміни синхронізації
chrome.storage.onChanged.addListener((changes, area) => {
if (area === 'sync') {
// Користувач увійшов на іншому пристрої та налаштування синхронізовались
reloadUI();
}
});
Обмеження: 100 КБ всього, 8 КБ на ключ. Відповідає для налаштувань, не для масивних даних.
Firefox: ручна синхронізація через sync API
Firefox не синхронізує storage.sync автоматично, але підтримує WebExtensions Sync:
// background.js
const SYNC_KEY = 'extensionSettings';
async function syncToRemote() {
const settings = await browser.storage.local.get('settings');
// Надіслати на власний сервер або хмарний сервіс
await fetch('https://api.example.com/sync', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(settings)
});
}
async function syncFromRemote() {
const response = await fetch('https://api.example.com/sync');
const remoteSettings = await response.json();
await browser.storage.local.set(remoteSettings);
}
// Синхронізація при встановленні та періодично
browser.runtime.onInstalled.addListener(() => syncToRemote());
browser.alarms.create('sync-settings', { periodInMinutes: 60 });
browser.alarms.onAlarm.addListener((alarm) => {
if (alarm.name === 'sync-settings') {
syncFromRemote();
}
});
Архітектура кроссбраузерної синхронізації
Єдиний підхід для Chrome, Firefox, Edge:
// shared/sync.ts
export interface SyncProvider {
upload(data: Record<string, any>): Promise<void>;
download(): Promise<Record<string, any>>;
}
export const chromeSync: SyncProvider = {
async upload(data) {
await chrome.storage.sync.set(data);
},
async download() {
return await chrome.storage.sync.get(null) as Record<string, any>;
}
};
export const remoteSync: SyncProvider = {
async upload(data) {
await fetch('/api/sync', {
method: 'POST',
body: JSON.stringify(data)
});
},
async download() {
const res = await fetch('/api/sync');
return await res.json();
}
};
// Вибір провайдера залежно від браузера
export const syncProvider = isChromeOrEdge() ? chromeSync : remoteSync;
Терміни
Базова chrome.storage.sync: 1 день. Повна кроссбраузерна з віддаленим сервером: 5–7 днів.