API加载失败

Question

正如我之前所说，我正在 chrome 中进行字典扩展，所以现在我到达了 javascript 部分。为了获取单词数据，我需要加载一个 api所以我使用了 p5.js 库，因为它更容易加载 json 数据，但我对语法感到困惑，我运行进入 errors.What 我应该怎么做？

这是我的 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)


      }



    }

这也是我的 html 代码，如果有帮助的话：

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

这是错误：

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.

Answer 1

测试上面的代码，我发现缺少的主要内容是 setup()，它初始化了很多 p5 内部结构。您可以放置一个空的 setup() 函数，然后 loadJSON() 应该可以工作：

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

API加载失败

API loading failed

javascript

api

p5.js