0

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)
})();
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
  • Content script runs alongside the web page so it inherits some of its restrictions. Try doing it in your background/event page: create an image element with src from the original page and run detection. You might additionally need `"permissions": [""]` in manifest.json. – wOxxOm Jun 28 '18 at 14:25
  • Thanks @wOxxOm. I already have `""` permission (see above), but I'll try creating a new element instead. – mikemaccana Jun 28 '18 at 14:29
  • @wOxxOm I've tried re-using the image as a canvas, and `faceDetector.detect()` no longer fails, but I can't log any output from it either - see code above. – mikemaccana Jun 28 '18 at 14:54
  • In both cases the underlying problem is the same and I believe my initial suggestion still applies. – wOxxOm Jun 28 '18 at 15:17

0 Answers0