Browserextensies ontwikkelen (Chrome en Edge) · Les

De Chrome Storage API gebruiken

Sla gebruikersinstellingen en gegevens veilig en efficiënt op met de `chrome.storage`-API voor lokale en gesynchroniseerde opslag.

Les 3 van 412 stappen

De Chrome Storage API gebruiken is een gratis Browserextensies ontwikkelen (Chrome en Edge)-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Browserextensies ontwikkelen (Chrome en Edge). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Introductie tot de Chrome Storage API

Bij het bouwen van browserextensies moet je vaak gegevens opslaan. Dit kunnen gebruikersinstellingen, de toepassingsstatus of gegevens uit de cache zijn.

De API chrome.storage biedt een manier om gegevens persistent op te slaan. Dat betekent dat ze behouden blijven nadat de browser is gesloten of de extensie is bijgewerkt.

Waarom chrome.storage gebruiken?

In tegenstelling tot gewone JavaScript-variabelen blijven gegevens die met chrome.storage zijn opgeslagen behouden. Daarom is het een goede keuze voor extensies:

Persistentie: Gegevens blijven behouden nadat de browser is gesloten en bij updates.
Beveiliging: De gegevens zijn geïsoleerd binnen je extensie, waardoor conflicten met andere extensies of webpagina's worden voorkomen.
Asynchroon: Bewerkingen blokkeren de hoofdthread niet, waardoor je extensie responsief blijft.
Sleutel-waardearchief: Je kunt eenvoudig gegevens opslaan en ophalen als eenvoudige sleutel-waardeparen.

Lokale opslag: chrome.storage.local

Het gebied chrome.storage.local is bedoeld voor het opslaan van gegevens die alleen beschikbaar moeten zijn in het huidige browserprofiel.

Het is ideaal voor tijdelijke gebruikersvoorkeuren, gegevens uit de cache of gegevens die specifiek zijn voor één browserinstantie. De opslaglimiet is doorgaans 5 MB.

Synchronisatieopslag: chrome.storage.sync

Voor gegevens die gebruikers in verschillende browsers of op verschillende apparaten willen kunnen openen, als ze zijn ingelogd op hun Google-account, is chrome.storage.sync de oplossing.

De gegevens worden automatisch gesynchroniseerd tussen alle instanties waarop de gebruiker je extensie heeft geïnstalleerd en is ingelogd. De opslaglimiet is kleiner, doorgaans 100 KB, met maximaal 8 KB per item.

storage versus localStorage

Misschien ken je de localStorage van de browser. Hoewel het doel vergelijkbaar is, heeft chrome.storage voor extensies doorgaans de voorkeur vanwege belangrijke verschillen:

Asynchroon: chrome.storage is asynchroon, terwijl localStorage synchroon is en de gebruikersinterface kan blokkeren.
Beveiliging: chrome.storage is beperkt tot je extensie.
Synchronisatie: Alleen chrome.storage.sync biedt synchronisatie tussen apparaten.
Beschikbaarheid: chrome.storage werkt in serviceworkers, maar localStorage niet.

Gegevens opslaan met .set()

Gebruik de methode .set() om gegevens op te slaan. Deze krijgt een object met sleutels als tekenreeksen en waarden die elk type kunnen hebben dat naar JSON kan worden omgezet.

In dit voorbeeld wordt de favoriete kleur van een gebruiker opgeslagen. Deze code zou in het achtergrondscript van je extensie worden uitgevoerd.

/* This code would typically run in your background.js */
/* (manifest.json would declare it as a service_worker) */

// Save a single item to local storage
chrome.storage.local.set({ 'favoriteColor': 'blue' }, function() {
  if (chrome.runtime.lastError) {
    console.error("Error saving color: ", chrome.runtime.lastError);
  } else {
    console.log("Favorite color saved!");
  }
});

// Save multiple items to sync storage
chrome.storage.sync.set({
  'userName': 'Coddy',
  'darkMode': true
}, function() {
  if (chrome.runtime.lastError) {
    console.error("Error saving user settings: ", chrome.runtime.lastError);
  } else {
    console.log("User settings saved to sync!");
  }
});

Gegevens ophalen met .get()

Gebruik de methode .get() om gegevens op te halen. Je kunt sleutels opgeven of null doorgeven om alle items op te halen.

De callbackfunctie ontvangt een object met de opgevraagde gegevens, of een leeg object als de sleutel niet is gevonden.

/* This code would typically run in your background.js */

// Get a single item from local storage
chrome.storage.local.get('favoriteColor', function(data) {
  const color = data.favoriteColor;
  if (color) {
    console.log("Your favorite color is: " + color);
  } else {
    console.log("Favorite color not set locally.");
  }
});

// Get multiple items from sync storage
chrome.storage.sync.get(['userName', 'darkMode'], function(data) {
  const userName = data.userName || 'Guest';
  const darkMode = data.darkMode || false;
  console.log(`Hello, ${userName}! Dark mode: ${darkMode}`);
});

// Get all items from local storage (use with caution for large data)
chrome.storage.local.get(null, function(data) {
  console.log("All local storage data:", data);
});

Gegevens verwijderen: .remove() en .clear()

Soms moet je opgeslagen gegevens verwijderen. Je kunt specifieke items verwijderen of alle gegevens van je extensie wissen.

.remove(keys): Verwijdert een of meer specifieke items.
.clear(): Verwijdert alle gegevens uit het opslaggebied van je extensie.

/* This code would typically run in your background.js */

// Remove a single item from local storage
chrome.storage.local.remove('favoriteColor', function() {
  if (chrome.runtime.lastError) {
    console.error("Error removing color: ", chrome.runtime.lastError);
  } else {
    console.log("Favorite color removed from local storage.");
  }
});

// Remove multiple items from sync storage
chrome.storage.sync.remove(['userName', 'darkMode'], function() {
  if (chrome.runtime.lastError) {
    console.error("Error removing settings: ", chrome.runtime.lastError);
  } else {
    console.log("User settings removed from sync storage.");
  }
});

// Clear all data from local storage (use with extreme caution!)
// chrome.storage.local.clear(function() {
//   if (chrome.runtime.lastError) {
//     console.error("Error clearing local storage: ", chrome.runtime.lastError);
//   } else {
//     console.log("Local storage cleared!");
//   }
// });

Luisteren naar wijzigingen in de opslag

Je extensie kan reageren wanneer de opgeslagen gegevens veranderen met de gebeurtenislistener chrome.storage.onChanged.

Dit is nuttig als verschillende onderdelen van je extensie, zoals een pop-up en een achtergrondscript, moeten weten wanneer gegevens zijn bijgewerkt.

De listener geeft details over wat er is veranderd (newValue, oldValue) en in welk opslaggebied (local, sync).

/* This code would typically run in your background.js */

chrome.storage.onChanged.addListener(function(changes, areaName) {
  console.log("Storage area '" + areaName + "' changed.");
  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(
      `Key "${key}" changed. ` +
      `Old value was "${oldValue}", new value is "${newValue}".`
    );
  }
});

// To demonstrate, let's change a value after a short delay
setTimeout(() => {
  chrome.storage.local.set({'favoriteColor': 'green'}, function() {
    if (!chrome.runtime.lastError) {
      console.log("Color updated to trigger onChanged listener.");
    }
  });
}, 2000);

De opslagmachtiging declareren

Om de API chrome.storage te gebruiken, moet je extensie de machtiging "storage" declareren in het manifest.json-bestand.

Zonder deze machtiging mislukken pogingen om chrome.storage te gebruiken met een fout en kan je extensie geen gegevens opslaan of ophalen.

{
  "manifest_version": 3,
  "name": "My Storage Extension",
  "version": "1.0",
  "permissions": [
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

Korte controle van de Storage API

Welke van de volgende uitspraken over chrome.storage zijn WAAR?

Beantwoord dit in de interactieve les

Samenvatting: persistentie van gegevens beheersen

Je hebt geleerd hoe je gegevens persistent opslaat in je browserextensies met de API chrome.storage!

We hebben .local behandeld voor browserspecifieke gegevens en .sync voor synchronisatie tussen apparaten.
Je weet nu hoe je gegevens kunt opslaan met .set(), ophalen met .get(), verwijderen met .remove() en wissen met .clear().
We hebben ook besproken hoe je met .onChanged op wijzigingen reageert en waarom de machtiging "storage" cruciaal is.

Deze kennis is essentieel voor het bouwen van robuuste en gebruiksvriendelijke extensies die gebruikersvoorkeuren en statussen onthouden.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “De Chrome Storage API gebruiken” gratis?

Ja — de volledige tekst van “De Chrome Storage API gebruiken” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Browserextensies ontwikkelen (Chrome en Edge) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Wat leer ik in “De Chrome Storage API gebruiken”?

Sla gebruikersinstellingen en gegevens veilig en efficiënt op met de `chrome.storage`-API voor lokale en gesynchroniseerde opslag. Je oefent met Browserextensies ontwikkelen (Chrome en Edge) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Browserextensies ontwikkelen (Chrome en Edge) te beginnen?

Ervaring vooraf is niet nodig. Browserextensies ontwikkelen (Chrome en Edge) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “De Chrome Storage API gebruiken”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Browserextensies ontwikkelen (Chrome en Edge)?

Ja. Elke les over Browserextensies ontwikkelen (Chrome en Edge) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Patronen voor eenrichtingsberichten
Tweerichtingsberichten tussen componenten
De Chrome Storage API gebruiken
Sync- versus lokale opslag en quota's

← Terug naar Browserextensies ontwikkelen (Chrome en Edge)