Save browser recording file via event listener (Chrome Extension)

[stefan.h.link]

Hi guys,

I have built a chrome extension that records a video file of the current tab.
My goal is to send this file to my bubble app and trigger a workflow to store the file.

I have a JavascripttoBubble element and additional an event listener via HTML element:

<script>
    window.addEventListener("message", (event) => {
 console.log("Received message:", event);
        bubble_fn_recording(event.data.recording);
    }, false);
</script>

My chrome background.js triggers the recording and also creates a base64data file what I see in the logs ( see screenshot below):

// Function to save the recording file
function saveFile(recordedChunks) {
  // Create a .webm file
  const blob = new Blob(recordedChunks, { type: 'video/webm' });

  // Use FileReader to convert the file to base64
  var reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function () {
    var base64data = reader.result.split(',')[1];

    // Send recording to Bubble app
    window.parent.postMessage({
      recording: base64data
    }, "*");
    console.error('Recording sent to Bubble app:', base64data);
  };
}

I don’t receive data in Bubble and cannot debug further, as I struggle to get any events.
Any support would be so much appreciated…!!