Mediapipe Hands: Refused to load scripts because it violates the following Content Security Policy directive

General Discussion
#1

I’m trying to build a chrome extension using TensorFlowJS’s HandPose Detection model along with Media Pipe Hands. The problem is when trying to create the detector, the solutionPath is being blocked by the browser, which throws the following error:

enter image description here

I have the following manifest.json file:

{
  "name": "chrome-extension-webpack",
  "description": "My basic Chrome extension",
  "version": "0.1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "serviceWorker.js"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["contentScript.js"],
      "all_frames": true,
      "run_at": "document_start"
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval' http://localhost:* http://127.0.0.1:*; script-src-elem 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' https://cdn.jsdelivr.net; object-src 'self'",
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
},
  "permissions": ["storage", "scripting", "contentSettings", "tabs", "activeTab"],
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },
  "action": {
    "default_title": "My basic Chrome extension",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/icons/16x.png",
      "32": "/icons/32x.png",
      "48": "/icons/48x.png",
      "128": "/icons/128x.png"
    }
  },
  "icons": {
    "16": "/icons/16x.png",
    "32": "/icons/32x.png",
    "48": "/icons/48x.png",
    "128": "/icons/128x.png"
  }
}

and the detector in being implemented inside the serviceWorker.ts file

class Controller {
    async estimateHands(video) {
        const model = handPoseDetection.SupportedModels.MediaPipeHands;

        const detector = await handPoseDetection.createDetector(model, {
            runtime: 'mediapipe',
            modelType: 'full',
            maxHands: 2,
            solutionPath: `https://cdn.jsdelivr.net/npm/@mediapipe/hands@${mediapipeHands.VERSION}`
        });

        const hands = await detector.estimateHands(video, { flipHorizontal: true })

        console.log({ hands })
    }
}

Is there a solution to this problem? Or a way to turn it around?

I tried the following solutions:

  • Insert “content_security_policy” inside manifest.json
  • using importScripts inside serviceWorker
  • Injecting the script URL inside the page meta

What I was expecting: being able too use the model inside my Chrome extension