As I said to my previous i am making a dictionary extencion in chrome so now I reached javascript part .In order to get words data I need to load an api so I used p5.js library because it's easier to load json data but I am confused with the syntax and I run in to errors.What should I do?
Here is my javascript code:
var Dict;
var button = document.getElementById("sub").onclick = submit;
function submit() {
var word = document.getElementById("input").value;
var url = "https://api.dictionaryapi.dev/api/v2/entries/en/" + word;
console.log(url)
loadJSON(url, gotData)
}
function gotData(data) {
Dict = data;
}
function draw() {
if (Dict) {
var resulttest = Dict[1]
console.log(resulttest)
}
}
here is also my html code if its helpfull:
<html lang="en"><head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<script src="background.js" defer=""></script>
</head>
<body>
<div class="wrapper"> Write a word :
<input id="input" type="text"><br>
<div>hello</div><br>
<button id="sub">Submit</button>
</div>
</body></html>
And this are the errors:
Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
popup.html:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Testing youre code above, the main thing I can see missing is setup() which initializes a lot of p5 internals. You can place an empty setup() function then loadJSON() should work:
var dictionaryApiResult;
var button = document.getElementById("sub").onclick = submit;
function setup(){
//to use loadJSON you still need to allow p5 to setup first
//even though you're not using it's rendering or createInput()/createButton()
}
function submit() {
var word = document.getElementById("input").value;
var url = "https://api.dictionaryapi.dev/api/v2/entries/en/" + word;
console.log(url)
loadJSON(url, gotData)
}
function gotData(data) {
dictionaryApiResult = data;
console.log(dictionaryApiResult[1]);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<input type="text" id="input"><br>
<input type="submit" id="sub">