I’m developing an educational Chrome extension for kids that uses an AI API to assist with specific study topics by answering their questions. To enhance the experience, I plan to add a cute 3D robot model. However, I’m encountering errors related to Content Security Policy restrictions, which prevent the execution of inline scripts.
image show errors I’m facing
If you see in the image it works well as web page but it gives me this errors when opening as extension
Small note I mentioned that it’s not critical but I really think kids may like it 😁
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smart Assistant</title>
<link rel="stylesheet" href="./style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="importmap"> //errors comes start from this line here
{
"imports": {
"three": "./scripts/three.module.js",
"GLTFLoader": "./scripts/GLTFLoader.js"
}
}
</script>
</head>
<body>
<div class="container">
<div id="container3D"></div>
</div>
<script src="./main.js" type="module"></script>
</body>
</html>
json manifest_version file
{
"manifest_version": 3,
"name": "Your Smart Assistant",
"version": "1.0",
"description": "currently placeholder",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"permissions": [
"tabs"
],
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
},
"web_accessible_resources": [
{
"resources": ["scripts/*"],
"matches": ["<all_urls>"]
}
]
}
right now this is all we got
I tried moving the import map to a separate JavaScript file with type “importmap”, but it resulted in errors, including one indicating that “importmap” is not supported.