Getting "Uncaught (in promise) DOMException: Failed to read or decode Blob for clipboard item type image/png." when trying to copy a PNG to clipboard

Question

I get this error:

Uncaught (in promise) DOMException: Failed to read or decode Blob for clipboard item type image/png.

when I try to copy a PNG image to the clipboard. I'm using it in a Chrome Extension. This is the code in the JS file (for the extension) that's causing the error:

var board_png = "";

var blob = "";

chrome.runtime.sendMessage({request: "fetch", url: board_url, json: "false", blob: "true"}, function(bblob){blob = bblob});

board_png = new File([blob], 'board_png.png', {type:"image/png", lastModified:new Date()});

try {
    navigator.clipboard.write([
        new ClipboardItem({
            'image/png': board_png
        })
    ]);
} catch (error) {
    console.error(error);
}

where board_url is a string which is a URL. This is the code in my background.js file (simply think of background.js as a file which just returns the 'message''s reply, bblob, whose value is set to blob):

async function fetchUrl(url, json, blob){
    var response = await fetch(url);
    if(json === true && blob === false){return await response.json();}
    else if(blob === true && json === false){return await response.blob();}
    else{return "ERROR";}
}

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
  if(message.request === "fetch"){
    const url = message.url;
    const json = Boolean(url.json);
    const blob = Boolean(url.blob);
    var response = fetchUrl(url, json, blob);
    sendResponse({response: response});
  }
});

I tried testing it many times, but nothing changed. Please don't confuse the error with the Error: Document is not focused error. The code should've copied the PNG image to my clipboard, but it instead copied the error message.

Why is it happening? Is something in my background.js wrong?

Edit: I tried changing chrome.runtime.onMessage.addListener(...) to many other forms which are correct and use either async-await, Promises or callbacks, but I still get the same error. This question should be considered for reopening, as there is no question similar to this (which is for a Chrome Extension), and as this must be a common step to convert URLs to images and copy them to the clipboard in Chrome Extensions, and so also as apparently the 'original' question of which this has been marked a duplicate is not the cause of the error (doesn't answer this question, as the 'original' only solves something that can be compared to a typo; the error still persists).