Como dije en mi anterior, estoy haciendo una extensión de diccionario en Chrome, así que ahora llegué a la parte de javascript. Para obtener datos de palabras, necesito cargar una API, así que usé la biblioteca p5.js porque es más fácil cargar datos json pero estoy confundido con la sintaxis y me encuentro con errores. ¿Qué debo hacer?
Aquí está mi código javascript:
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) } }aquí también está mi código html si es útil:
<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>Y estos son los errores:
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.Probando su código anterior, lo principal que puedo ver que falta es setup() que inicializa muchas partes internas de p5. Puede colocar una función de setup() y luego loadJSON() debería funcionar:
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">