API loading failed-CodePudding

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 > 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.

CodePudding user response：

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">