Chrome extension refused to create a worker from blob because it violates the following Content Security Policy

29 views Asked by At

I'm trying to implementing the [sentry.io][1] feature for debugging in my react chrome extension But I'm unable to achieve my goal because of content security policy I search about this problem but they are suggesting me to do add meta tag in index.html but I'm not using any html file

Here I'm directly injecting the react build into chrome tabs

The list of errors I'm getting while running: [![Errors][2]][2]

Manifest.json

{
  "name": "chrome extension",
  "description": "Request & record videos easily for interviews & testimonials",
  "manifest_version": 3,
  "offline_enabled": true,
  "version": "1.0.0",
  "minimum_chrome_version": "49",
  "host_permissions": [
    "*://*/*"
  ],
  "permissions": [
    "cookies",
    "tabs",
    "storage",
    "downloads",
    "scripting",
    "activeTab",
    "tabCapture",
    "desktopCapture"
  ],
  "action": {
    "default_popup": "sources/popup.html"
  },
  "background": {
    "service_worker": "service_worker.js"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": [
        "content.js",
        "bundle.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "styles.css",
        "sources/*",
        "*"
      ],
      "matches": ["*://*/*"],
      "use_dynamic_url": true
    }
  ],
  "externally_connectable": {
    "matches": [
      "*://localhost/*",
      "http://127.0.0.1:*/*",
      "*://*/*"
    ]
  },
  "content_security_policy": {
    "content_security_policy": "script-src 'self' worker-src: '*' 'unsafe-eval'; object-src 'self';"
  }
}

I've applied the csp in manifest file but I think i'm doing wrong

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import * as Sentry from "@sentry/react";

Sentry.init({
    dsn: "https://5a063d0a833f3e0e1d6bf21eb8cd6bf5@o4506496546177024.ingest.us.sentry.io/4506890503782400",
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration({
        maskAllText: false,
        blockAllMedia: false,
      }),
    ],
    tracesSampleRate: 1.0,
    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
});

ReactDOM.render(<App />, document.getElementById('screen-recorder-mv3'))

reportWebVitals();

How I can get rid of these issues ? Thanks In Advance [1]: https://sentry.io/ [2]: https://i.stack.imgur.com/eCArG.png

0

There are 0 answers