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

TensorFlow 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

3

Hi @danielg.favero ,

Thanks for raising this issue with us. This issue is not with tfjs; it’s with Chrome extension manifest v3, which doesn’t allow extensions to open external scripts.

You could use manifest v2 to avoid this issue. Let me know if this helps.

Thank You!!