Configurer Chrome Storage Sync correctement

Important : chrome.storage.sync fonctionne uniquement si l’utilisateur est connecté à Chrome avec un compte Google et que la synchronisation est activée. Sinon, l’API se comporte comme un stockage local.

Pourquoi Chrome Storage et quand l’utiliser

Chrome Storage (chrome.storage) est une API de navigateur qui permet de stocker des objets côté client, de façon asynchrone. Elle est plus flexible que localStorage (qui ne stocke que des chaînes) et plus performante pour des flux asynchrones. La variante chrome.storage.sync ajoute la synchronisation des données entre instances de Chrome reliées au même compte Google.

Définition rapide :

chrome.storage.local — stockage local persistant pour un profil de navigateur.
chrome.storage.sync — stockage synchronisé sur le cloud Chrome, répliqué sur les autres appareils du même compte.

Quand choisir l’une ou l’autre :

Utilisez chrome.storage.sync pour des paramètres d’extension légers que l’utilisateur souhaite retrouver sur ses autres appareils (préférences UI, toggles, petites listes).
Utilisez chrome.storage.local pour des données volumineuses, temporaires, ou sensibles (évitez d’y stocker des secrets non chiffrés).

Principales différences (énoncé rapide)

Asynchrone : chrome.storage.* est non bloquant. Utilisez callbacks ou Promises.
Format : chrome.storage stocke des objets JS (plus pratique que les chaînes de localStorage).
Synchronisation : chrome.storage.sync propage les changements entre appareils si la sync est activée.
Portée : chrome.storage.local reste sur l’appareil; chrome.storage.sync passe par le compte Google.

TL;DR technique — API et usages courants

chrome.storage.local.get/set/remove/clear — stocker et lire localement.
chrome.storage.sync.get/set/remove/clear — stocker et lire avec synchronisation.
Toujours demander la permission “storage” dans le manifest d’une extension.
Pour le debug, utilisez le callback ou la Promise retournée pour confirmer la complétion.

Exemples pratiques (callbacks et Promises)

Code (callback) :

// Enregistrer une valeur (callback)
chrome.storage.sync.set({ theme: 'dark' }, function() {
  if (chrome.runtime.lastError) {
    console.error('Erreur de sync:', chrome.runtime.lastError);
  } else {
    console.log('Thème enregistré.');
  }
});

// Récupérer une valeur (callback)
chrome.storage.sync.get(['theme'], function(result) {
  console.log('Thème actuel:', result.theme);
});

Code (Promise / async-await avec l’API Promises si disponible ou wrapper) :

// Exemple générique avec wrapper Promise
function storageSet(key, value, area = 'sync') {
  return new Promise((resolve, reject) => {
    chrome.storage[area].set({ [key]: value }, () => {
      if (chrome.runtime.lastError) reject(chrome.runtime.lastError);
      else resolve();
    });
  });
}

async function saveTheme() {
  try {
    await storageSet('theme', 'light');
    console.log('Thème sauvegardé.');
  } catch (err) {
    console.error('Erreur:', err);
  }
}

Note : certaines versions de l’API Chrome pour extensions offrent une version Promise-based (chrome.storage.sync.get().then(…)). Si elle n’est pas présente, utilisez un petit wrapper comme ci-dessus.

Chrome sync local storage ? (explication claire)

Oui — chrome.storage.sync permet de synchroniser des objets entre appareils lorsque :

l’utilisateur est connecté à Chrome via un compte Google ;
Chrome est en ligne ;
la synchronisation est activée dans les paramètres du navigateur.

Si l’appareil est hors ligne, les écritures sont enregistrées localement et synchronisées plus tard lorsque la connexion revient. Si la synchronisation est désactivée, vos appels vont stocker les données uniquement en local (comportement équivalent à chrome.storage.local pour les usages de l’extension).

Manifest : permission nécessaire

Assurez-vous d’avoir la permission storage dans votre manifest.json (extensions Chrome) :

{
  "manifest_version": 3,
  "name": "Mon Extension",
  "version": "1.0",
  "permissions": ["storage"]
}

Sans cette permission, chrome.storage.* ne fonctionnera pas correctement dans une extension.

Différence entre chrome.storage.sync et chrome.storage.local (détaillé)

Performance : chrome.storage.* est asynchrone, mais sync implique une couche réseau et peut être soumis à latence. local est purement local et plus rapide pour gros volumes.
Réplication : sync réplique automatiquement entre appareils ; local reste sur la machine.
Format : chrome.storage supporte des objets JSON, donc plus simple pour structurer des données.
Mode incognito : certains paramètres d’extensions peuvent être préservés par sync même en navigation privée (selon l’extension et le contexte d’utilisation).

Différences avec cookies et cache (tableau traduit)

Élément	Usage	Taille	Sécurité

| Storage vs Cookies | ➡ Les cookies transmettent des données au serveur via les requêtes HTTP.

➡ Le stockage local (localStorage / chrome.storage.local) est destiné à la lecture côté client uniquement.

➡ Il confine les données au niveau du navigateur sans les envoyer au serveur par défaut. | ➡ Le localStorage / chrome.storage offre une capacité bien supérieure aux cookies.

➡ Un cookie est généralement limité à environ 4 KB.

➡ Le stockage local est mieux adapté aux données volumineuses côté client. | ➡ Les cookies ont des mécanismes intégrés (HTTP-only, Secure) qui peuvent améliorer la sécurité.

➡ Les deux peuvent être vulnérables aux attaques XSS si le code client n’est pas protégé. | | Storage vs Cache | ➡ Le cache est une copie temporaire des ressources (accélère le chargement d’URL).

➡ Le storage est une rétention long terme de données spécifiques à l’application.

➡ Le storage ne s’expire pas automatiquement sauf si l’utilisateur le supprime. | ➡ Le cache traite des octets et des fichiers ; le storage manipule des blocs de données structurées.

➡ Le cache est souvent optimisé pour de petites ressources réutilisées. | ➡ Le cache, comme le storage, peut être attaqué via des scripts malicieux.

➡ Évitez de stocker des informations sensibles sans chiffrement. |

Note : éviter de stocker des secrets (mots de passe en clair, tokens non chiffrés) dans chrome.storage.*.

Où est stocké localStorage dans Chrome ?

Sur Windows, le chemin typique du profil Chrome est :

AppData\Local\Google\Chrome\User Data\Default\Local Storage

(Remarque : l’emplacement exact dépend du profil et du système d’exploitation ; ne modifiez pas manuellement ces fichiers à chaud.)

Gestion et nettoyage du stockage Chrome (guide utilisateur pas à pas)

1) Effacer les données de navigation

Ouvrez Chrome sur votre ordinateur.
Cliquez sur les trois points verticaux en haut à droite pour ouvrir le menu.
ALT: Icône menu Chrome (trois points verticaux) dans l’angle supérieur droit du navigateur
Allez dans Plus d’outils → Effacer les données de navigation.
ALT: Menu Chrome ouvert montrant l’option “Plus d’outils”
Dans l’onglet “Basique”, choisissez une Plage horaire.
Cochez Historique de navigation, Cookies et autres données de site, Images et fichiers en cache, selon vos besoins.
ALT: Fenêtre “Effacer les données de navigation” affichant les options de suppression
Cliquez sur Effacer les données.

Raccourci : CTRL + Maj + Suppr (Windows) ouvre directement la boîte de dialogue.

Conseil : des outils tiers (ex. CCleaner) peuvent automatiser le nettoyage mais vérifiez toujours les paramètres avant suppression.

2) Effacer les données de stockage spécifiques (via Paramètres)

Ouvrez Chrome.
Ouvrez le menu (trois points).
ALT: Trois points du menu Chrome (vue rapprochée)
Sélectionnez Paramètres.
ALT: Page des Paramètres de Chrome ouverte
Dans le panneau de gauche, choisissez Confidentialité et sécurité.
ALT: Section “Confidentialité et sécurité” dans les paramètres Chrome
Cliquez sur Paramètres des sites.
ALT: Option “Paramètres des sites” dans la confidentialité
Ouvrez Afficher les autorisations et les données stockées sur les sites.
ALT: Page listant les sites et les données stockées
Cliquez sur Effacer toutes les données puis confirmez en cliquant sur Effacer.
ALT 1: Bouton “Effacer toutes les données” dans les paramètres des sites ALT 2: Fenêtre de confirmation pour effacer les données

Optionnel — gestion des cookies :

Dans Paramètres des sites → Cookies et autres données de site, activez Effacer les cookies et les données de site lorsque vous fermez toutes les fenêtres pour une suppression automatique à la fermeture.

Images :

ALT: Captures d’écran montrant les options de cookies et de suppression automatique

3) Effacer le localStorage via les DevTools (pour les développeurs)

Ouvrez la page où l’extension ou le site est chargé.
Menu Chrome → Plus d’outils → Outils de développement.
Onglet Application.
ALT: Onglet Application dans les DevTools de Chrome
Dans le panneau de gauche, développez Local Storage.
ALT: Section Local Storage listant les domaines
Faites un clic droit sur le domaine souhaité → Clear pour supprimer les clés.
ALT: Menu contextuel dans DevTools permettant de vider le localStorage pour un domaine

Résolution des problèmes courants — chrome.storage.sync.set ne fonctionne pas

Symptômes possibles : valeurs non sauvegardées, valeurs non propagées, erreurs silencieuses.

Playbook de dépannage (SOP rapide) :

Vérifier la permission storage dans le manifest.json.
Vérifier chrome.runtime.lastError dans le callback pour voir l’erreur.
Assurer que l’utilisateur est connecté et que la sync est activée (Paramètres → Synchronisation).
Tester en local avec chrome.storage.local pour isoler un problème réseau/sync.
Utiliser des clés simples (éviter caractères spéciaux) et tester avec une seule clé pour reproduire.
Redémarrer Chrome et (si nécessaire) faire un Reset Sync depuis les paramètres Google Chrome pour forcer la réinitialisation.
Vérifier les quotas : si vous manipulez de très grands objets, la sync peut refuser l’opération. (Évitez d’y stocker des données volumineuses.)
Vérifier les permissions Windows (ou macOS) : autoriser Chrome à accéder au stockage si un contrôle d’accès système est présent.
Si vous utilisez des Promises/wrappers asynchrones, vérifier l’ordre d’exécution et que vous attendez la résolution correctement.

Conseils pratiques :

Toujours logguer chrome.runtime.lastError après un set/get.
Tester avec plusieurs appareils pour confirmer la propagation.

Checklists par rôle

Développeur (avant release) :

Permission “storage” présente dans manifest.
Tests unitaires pour set/get/clear.
Gestion des erreurs (chrome.runtime.lastError) et retry/backoff.
Éviter les gros objets dans sync ; stocker les gros éléments en local ou côté serveur.
Documenter la structure des clés pour éviter collisions.

QA / Testeur :

Tester en mode offline puis online pour vérifier la réplication différée.
Tester avec plusieurs comptes/utilisateurs.
Tester la suppression via DevTools et via l’UI (si applicable).
Vérifier comportement en navigation privée/incognito.

Administrateur / Opérations :

Voir politiques de sync pour l’organisation (G Suite / Google Workspace) si applicable.
Communiquer aux utilisateurs les implications de la synchronisation des données.

Utilisateur final :

Confirmer qu’il est connecté à Chrome et que la synchronisation est activée si souhaitée.
Savoir comment effacer les données via Paramètres → Confidentialité et sécurité.

Tests d’acceptation (mini-suite)

TC1 : Après chrome.storage.sync.set({key: ‘v’}), récupérer la valeur immédiatement et vérifier l’égalité.
TC2 : Écrire une valeur en offline ; remettre en ligne ; vérifier que la valeur apparaît sur un autre appareil connecté au même compte.
TC3 : Supprimer la valeur via DevTools → Local Storage ; vérifier que l’UI se met à jour en conséquence.
TC4 : Vérifier que chrome.runtime.lastError est défini lorsqu’une opération échoue (ex. quota/permission).

Modèle mental — heuristique pour choisir sync vs local

Si c’est une préférence utilisateur légère (theme, langue, toggles) → sync.
Si c’est un cache volumineux, un blob ou des données sensibles → local ou serveur.
Si la disponibilité hors ligne est critique → privilégiez local (sync peut être asynchrone et retardé).

Sécurité & Vie privée (notes GDPR et bonnes pratiques)

Ne stockez pas de mots de passe en clair dans chrome.storage.
Pour des données personnelles sensibles, préférez une stratégie serveur + chiffrement côté client.
Indiquez clairement dans votre politique de confidentialité quelles données sont synchronisées via le compte Google.
Respectez les droits utilisateurs : permettre la suppression simple et la portabilité si nécessaire.

Note GDPR : la synchronisation via le compte Google implique un traitement par Google ; vérifiez les obligations contractuelles si vous traitez des données personnelles sensibles.

Quand chrome.storage.sync n’est pas adapté — contre-exemples

Données de session critiques pour l’expérience hors ligne immédiate (préférez localStorage ou IndexedDB).
Gros fichiers ou données multimédia (utilisez stockage serveur ou API de fichiers cloud).
Cas où l’utilisateur refuse la synchronisation : prévoyez une stratégie de fallback en local.

Diagramme de décision (Mermaid)

flowchart TD
  A[Données à stocker ?] --> B{Taille}
  B --> |Petite| C{Doit être synchronisé ?}
  B --> |Grosse| D[Utiliser local ou serveur]
  C --> |Oui| E[Utiliser chrome.storage.sync]
  C --> |Non| F[Utiliser chrome.storage.local]
  E --> G{Utilisateur connecté ?}
  G --> |Oui| H[Sync activée]
  G --> |Non| I[Stocker localement et informer l'utilisateur]

Mini méthodologie de migration local → sync

Identifier les clés candidates (préférences non sensibles, < quelques KB chacune).
Ajouter save en double écriture : écrire d’abord en local puis tenter sync.
Lors de la lecture, préférence à sync s’il y a une valeur, sinon fallback local.
Fournir un mécanisme de convergence et migration (écrire depuis sync vers local après pull initial).

FAQ

Est-ce que Chrome synchronise automatiquement localStorage ?

Non. localStorage (API standard) n’est pas synchronisé par défaut. chrome.storage.sync est l’API fournie pour la synchronisation entre appareils.

Où se trouve le stockage local de Chrome sur Windows ?

Typiquement : AppData\Local\Google\Chrome\User Data\Default\Local Storage.

Comment vider uniquement le stockage d’un site ?

Ouvrez DevTools → Application → Local Storage → sélectionnez le domaine → clic droit → Clear.

Que faire si chrome.storage.sync.set ne sauvegarde pas mes valeurs ?

Vérifiez les permissions, chrome.runtime.lastError, le statut de synchronisation, et testez la même opération en chrome.storage.local pour isoler le problème.

1-ligne Glossaire

chrome.storage.sync : API de stockage synchronisé entre appareils via compte Google.
chrome.storage.local : stockage persistant local au profil du navigateur.
localStorage : API web simple qui stocke des chaînes côté client.
DevTools → Application : outil pour inspecter et vider storage côté client.

Résumé et points clés

chrome.storage.* est asynchrone et supporte des objets JS ; c’est plus pratique que localStorage pour de l’état structuré.
chrome.storage.sync synchronise entre appareils si l’utilisateur est connecté et la sync activée.
Pour dépanner : vérifier permissions, chrome.runtime.lastError, quotas et état de sync.
N’utilisez pas sync pour les gros volumes ou données sensibles sans chiffrement.

Appel à l’action

Si vous développez une extension, commencez par ajouter des logs systématiques pour chrome.runtime.lastError, créez des tests unitaires pour set/get, et fournissez un fallback en local pour les scénarios offline.

Lire aussi :

3 Ways to Safely Sync Your Chrome Passwords With a Keychain
How to fix Chrome not syncing [Bookmarks, Passwords, Tabs]
Fix: Your in Browser Storage for Mega is Full [Chrome]
5 Fixes You Must Try When Tabs Won’t Open in Chrome

Comment configurer correctement Chrome Storage Sync