Agenda

• Finishing / reviewing Round 3 proposals
• Discussing Chrome databases
• Page clipper IndexedDB activity

1. chrome.storage API

The official Chrome extension storage API.

Options:

• chrome.storage.local

  • ✅ Stores data locally
  • ✅ Asynchronous
  • ❌ Not synced across devices
  • 💾 Great for most general use cases

• chrome.storage.sync

  • ✅ Syncs across devices (Google account)
  • ⚠️ Limited to 100KB total, 8KB per item
  • 🔄 Great for preferences/settings

• chrome.storage.session (Manifest V3 only)

  • 🧪 Lives only while the extension is running
  • ❌ Not persistent
  • ✅ Asynchronous
  • 🧠 Good for temporary, in-memory state

2. localStorage

• 🧱 Part of the Web Storage API
• ❌ Synchronous (can block)
• 💾 5MB quota
• 🔒 Tied to extension origin
• ⚠️ Not recommended for performance-critical apps

3. IndexedDB

• 💡 Full-featured client-side DB
• ✅ Asynchronous
• 💾 Stores complex objects & blobs
• 📊 Excellent for structured data, querying, and large datasets
• 🧠 Best for serious data needs

Sync vs Async, Permissions, and Origins

🧠 Sync vs Async

• Synchronous (sync):

  • Blocking operations (e.g., localStorage)
  • Slows down performance, avoid in critical paths

• Asynchronous (async):

  • Non-blocking (e.g., chrome.storage, IndexedDB)
  • Uses callbacks or promises
  • ✅ Recommended for all real-world use

🔐 Permissions in manifest.json

✅ chrome.storage needs the "storage" permission in your manifest.

🌐 What is an "origin"?

• An origin is the combination of:

  • protocol + domain + port
  • Example: https://example.com is one origin
    http://example.com is a different origin

• In Chrome extensions:

  • Your extension has its own origin, like chrome-extension://<extension-id>
  • localStorage and IndexedDB are scoped to your extension’s origin

⚠️ Extensions cannot access webpage storage unless explicitly allowed.

Storage Comparison Table

Which One Should You Use?

• 🔹 Use chrome.storage.local for most simple needs
• 🔹 Use chrome.storage.sync for synced preferences/settings
• 🔹 Use chrome.storage.session for transient states
• 🔹 Use IndexedDB when you need power or scale
• 🔹 Avoid localStorage unless you really know what you're doing

https://github.com/CIS-3500/chrome-storage-demo/

Challenge: What is the difference between the behavior or chrome.storage vs IndexedDB for JSON data?
Try storing the value { "key": 1 } ...