Get image pixels from chrome extension using javascript

I am trying to get the pixels of an image when the user right clicks on it. This should work on any webpage. I created a right-click for my extension using chrome.contextMenus.create and listen for the event using chrome.contextMenus.onClicked.addListener

Everything works fine and the right click gives me the url of the image that was right-clicked.

I then use the following code at the content.js to get the pixels:

let clickedImage = new Image();
clickedImage.src = imageUrl;
clickedImage.onload = function () {
    let canvas = document.createElement('canvas');
    canvas.style.display = "none";
    var ctx = canvas.getContext('2d');
                    
    ctx.drawImage(clickedImage, 0, 0, 400, 400);
    let imageData = ctx.getImageData(0, 0, 400, 400);
}

As many pages use images from other domains, the above code gives the following error:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

I would have guessed, the cross-origin would be fine given that image had already been used/loaded by the page. However, it does not seem to work that way.

I also tried to leverage the image element directly but received the same error.

var imageElement = document.querySelector("img[src='" + imageUrl + "']");

I do not want to pass the image URL to the server side and load it there as it would open my server to attacks where people could send huge image files. Is there a way to do this on the client side? Since the image is already loaded on the webpage, I assume there must be a way to get the pixels out of it but could find it myself; hence, this question.

I’d be grateful for any guidance you might have.

Thanks,

Doug