Good evening
I am completely new in the field of browser extensions, so this might seem trivial to some, however....
I cannot for the life of me figure out how to use an 'unpkg' in a chrome extension. I have been dabbling with Content Security Policy (CSP), but I just cannot figure out how to make it work. I am using manifest version 3, which might even be incompatible, but I don't know if switching to manifest version 2 will even be the solution as a lot of other problems and questions then start to crop up.
I have tried to use sandbox mode, but I have no idea how to test it, so I presume I did not set it up correctly.
In the examples below I have also tried to add CSP in the HTML head in a <meta> tag, but I do not think that works.
This is the primary error:
I have tried copy/pasting the contents of the unpkg link (https://unpkg.com/ml5@latest/dist/ml5.min.js) into a new file, which yields:
No matter what I do to my content-security-policy in the manifest.json this is always the result.
manifest.json
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "2.1",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"],
"content-security-policy": {
"extension_pages": "script-src 'self'; object-src 'self'",
"sandbox": "allow-scripts; script-src 'self' 'unsafe-eval' https://unpkg.com/*"
},
"action": {
"default_popup": "main.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sentiment analysis</title>
<link rel="stylesheet" href="./Resources/css/index.css">
</head>
<body>
<div>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script src="ml5.js"></script>
<script src="main.js"></script>
</div>
</body>
</html>
The rest of the project is in this repo.
I am not a skilled programmer at all, so all of this is most definitely amateurish. All I need is to get this working, not make it safe nor beautiful (that may come later.. :D ).
For the record, I have all of it working in a local javascript file, it is this CSP thing that is bugging me..
This is the local Github repo, but please be aware of some NSFW language, as what I am trying to do is reverse negative sentences on the internet.. Most in the main.html.
NEW MANIFEST:
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "2.1",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"],
"content-security-policy": {
"extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self' 'unsafe-eval'",
"sandbox": "allow-scripts; script-src 'self' 'unsafe-eval' https://unpkg.com/*"
},
"action": {
"default_popup": "main.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
}