How can I use FaceDetector in a Chrome Extension? - google-chrome-extension

Question

I have a very minimal Chrome Extension using the FaceDetector API.
However simply calling faceDetector.detect(image) fails with:
content.js:10 Uncaught (in promise) DOMException: Source would taint origin.
My content script is as follows:
;(async function(){
var faceDetector = new FaceDetector();
var image = document.querySelector("img")
var faces = await faceDetector.detect(image)
})();
My manifest.json has the following permissions:
"permissions": [
"tabs",
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["js/content.js"],
"run_at": "document_end"
}
],
How can I make FaceDetector work on images on the page?
Update: converting to a canvas and detecting there produces a different error:
;(async function(){
console.log(`\n\n\nHi there!`)
var faceDetector = new FaceDetector();
var image = document.querySelector("img");
var canvas = document.createElement('canvas');
// Canvas is whatever size actual picture size is
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
console.log('Canvas full size', canvas.width, canvas.height)
// Canvas element is styled to size of image element (eg, handle retina)
canvas.style.height = `${image.height}px`;
canvas.style.width = `${image.width}px`;
console.log('Canvas size', image.width, image.height)
var context = canvas.getContext("2d");
context.drawImage(image,0,0);
console.log(`About to detect!`)
var faces = await faceDetector.detect(canvas);
// Line below fails with 'Invalid element or state.'
console.log(faces)
})();