Google chrome extension 如何在Chrome扩展中使用FaceDetector？

我有一个非常小的Chrome扩展使用

但是，仅调用

faceDetector.detect（image）

失败，原因如下：

js:10未捕获（承诺中）DomeException:源代码将污染源代码

我的内容脚本如下：

;(async function(){
    var faceDetector = new FaceDetector();
    var image = document.querySelector("img")
    var faces = await faceDetector.detect(image)
})();

My

manifest.json

具有以下权限：

"permissions": [
    "tabs",
    "<all_urls>"
],
"content_scripts": [
  {
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "js": ["js/content.js"],
    "run_at": "document_end"
  }
],

---

内容脚本与网页一起运行，因此它继承了一些限制。尝试在后台/事件页面中执行此操作：从原始页面创建一个带有src的图像元素并运行检测。您可能还需要manifest.json.Thank@wOxxOm中的“

”权限“：[”“]

。我已经有了

“

权限（见上文），但我将尝试创建一个新元素。@wOxxOm我已尝试将图像重新用作画布，并且

faceDetector.detect（）

不再失败，但我也不能记录它的任何输出——请参阅上面的代码。在这两种情况下，根本问题是相同的，我相信我最初的建议仍然适用。

    ;(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)
})();