I did, and damn, it took a while to figure it out! Here’s how to do it. Here I will demonstrate using video upload as an example.

Gotcha 1️

The iframe approach to set / get the blob — Nope! That’s unreliable.

Gotcha 2️

A good friend told me that we could actually use chrome.postMessage() to send the blob as a message to the web app, but then we figured that it is not possible since postMessage stringifies the blob and stringifying a blob will rip apart all the underlying methods and data so we end up getting an empty object no matter what we do. Ain’t that a bummer?

The Solution

At last, I finally put all the pieces together from my weeks of googling to end up finding the correct method to do this with the help of content-scriptsand **background.js. **Let me start with the scenario as usual and then we will walk through the implementation together.

The scenario:

1. User installs my chrome extension from the chrome app store and records a video.
2. On click of “Stop Recording”, a blob is generated on the background.jsfile.
3. We need to pass this blob to the web app after opening the app in a new tab via the content-script.
4. Blob is received at the web app and processed further.

The “Start Recording” and “Stop Recording” are a couple of clicks so I think I can skip that conveniently!

#nextjs #react #javascript