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