Back to all Bounties
Earn 4,500 ($45.00)
due 1 month ago
Canceled
Fix Chrome Extension Media Storage (IndexedDB) – Blob Handling & Message Passing
reginald9
Details
Applications
4
Discussion
Bounty Description
📝 Bounty Description:
I'm building a Chrome extension that records user audio + screenshots, and saves them per session in IndexedDB for local viewing.
The extension uses:
- Popup UI to trigger recording- Content script to handle media capture- Background script to coordinate messaging and storage- IndexedDB (via SessionMediaDB) for storing blobs locally
💥 Problem:
The media blobs (audioBlob and screenshotBlob) are not saved or retrieved properly, resulting in no media showing up in the session view. This issue has persisted even after implementing base64 conversion to pass blobs between contexts.
🔍 Key Details:
- Content script captures the media blobs and tries to send them to the background script via chrome.runtime.sendMessage.- Because Chrome does not support sending Blobs directly between contexts, we're converting blobs to base64 in the content script, and reconstructing them as Blobs in the background script.- The background script then saves the blobs to IndexedDB.- However, the saved sessions either:- Do not store any blob data, or- Fail to retrieve/display them in the extension UI.
✅ What’s Been Done:
- Content and background scripts use helper functions to convert blob ↔ base64.- IndexedDB uses keyPath: null and stores blobs under keys like media:session_<id>.- hasAudio and hasScreenshot flags are updated based on storage outcome.- Logging is in place on both sides (saving + retrieval).
📦 Your Task:
- Fix the blob saving pipeline: ensure audio/screenshot blobs are correctly sent and stored in IndexedDB.- Fix the blob retrieval logic: ensure session detail view can correctly load and preview stored blobs.- Fix message format mismatch (if any): ensure popup → background → content script messaging is working smoothly.- Validate and test: we should be able to:- Record a session- See media:session_<id> entries in IndexedDB with valid blobs- View media in our Chrome extension UI
💻 Tech Stack:
- Manifest V3 Chrome extension- Vanilla JS + ES Modules- Uses chrome.runtime.sendMessage() and chrome.scripting.executeScript()- IndexedDB + chrome.storage.local
🧪 Bonus if applicable:
- Help unify content-script-fixed-v2.js with the main injected script- Simplify blob passing logic if a cleaner mechanism is found
🧠 How to Reproduce:
- Load the extension locally in dev mode- Open any page- Click the record button in the popup- Stop recording → check the session media tab- Media blobs are not shown (and likely not saved)
🔗 What I’ll Provide:
- Access to the current codebase via Replit project- Screenshots and logs from Chrome DevTools and IndexedDB- Background on what has already been tried