Lecture 18

Agenda

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

Storage Options in Chrome Extensions

Chrome extensions have access to three main types of storage mechanisms.

Each is suited to different use cases and has different permissions and limitations.

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

Finer points

Some of the details that might be confusing

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.

Choosing your DB

in Chrome Extensions

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 } ...