0

I am trying to pass a Blob from a chrome extension to a javascript web application using the Chrome Message API. Inspired by a former Thread I want to convert the blob to text in order to send the content and filetype as an object via the messaging API to the website and eventually reassemble the Blob.

When executing the following snippet of code, however, I'm unable to reassemble the Blob. Basically the URL.createOjectURL() method should return valid blob:-URLs for both, blob and new_blob. While working on both objects, the new_blob URL results in a corrupted image (grey square) while the URL for blob shows the correct image. (On the receiving end the same problem occurs, of course).

fetch(request.url)
    .then(r => r.blob())
    .then(blob => {
    var filetype = blob.type
    blob.text().then(text => {
        var message = {
            blob: text,
            url: request.url,
            filetype: filetype
            }

        var new_blob = new Blob([message.blob], {type: message.filetype})

        console.log(URL.createObjectURL(blob))
        console.log(URL.createObjectURL(new_blob))

        ...
        sendResponse(message)
        })

    })
m.a.
  • 3
  • 4
  • Remove `blob.text().then(text => ` and just use URL.createObjectURL(blob) – wOxxOm Oct 10 '22 at 13:02
  • Thank your for your suggestion. That's how I started, however chrome has a security feature resulting in a `Not allowed to load local resource` error: When sending the URL from the extension to a website, the website is not allowed to access the local file. – m.a. Oct 10 '22 at 13:22
  • 3
    Using `.text()` on binary data seems like a bad idea. – Bergi Oct 10 '22 at 13:33
  • 1
    @m.a. you need to fetch in the content script, then dispatch the blob using CustomEvent. Another, much faster solution is shown [here](https://groups.google.com/a/chromium.org/g/chromium-extensions/c/UyNHEHQKlJA/m/it_eC58DAwAJ). – wOxxOm Oct 10 '22 at 16:04

1 Answers1

0

While the solution using blob is still not working, I found an alternative way to solve the problem: Using base64. There is example code available on GitHub:

const BlobToBase64 = function(blob){
... (see gist) ...
}

fetch(request.url)
    .then(r => r.blob())
    .then(blob => BlobToBase64(blob))
    .then(base => {
       sendResponse(base)
       })
m.a.
  • 3
  • 4