javascript Chrome 扩展“Script-src”错误(自学)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31527235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:56:28  来源:igfitidea点击:

Chrome Extension "Script-src" error (self-learning)

javascriptjsongoogle-chrome-extension

提问by Kevin

I am self-learning JavaScript after learning C++ in school, and I thought it would be good practice to try to build a Chrome Extension. I am trying to access OpenWeatherMap's API to get the city ID to do a weather search.

在学校学习了 C++ 之后,我正在自学 JavaScript,我认为尝试构建一个 Chrome 扩展程序是一个很好的做法。我正在尝试访问 OpenWeatherMap 的 API 以获取城市 ID 以进行天气搜索。

Here is the part of the code that is causing the problem:

这是导致问题的代码部分:

var cityParam = $('#cityInput').val(); //ex. of cityParam = "New York"
        var cityURL = "http://api.openweathermap.org/data/2.5/find?callback=?&q="+ cityParam + "&type=like&sort=population&cnt=30";

        var cityJSON;

        $.getJSON(cityURL, function(data) {
            cityJSON = data;
}

The error I received from Chrome was:

我从 Chrome 收到的错误是:

Refused to load the script [url] ... because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

I did a Google search and it seems like Chrome Extensions are very strict in what you can and cannot do (ex: cannot inline javascript). Not being very familiar with web development, I'm not quite sure where to start looking on how to solve this problem.

我进行了 Google 搜索,似乎 Chrome 扩展程序对您可以做什么和不能做什么非常严格(例如:不能内联 javascript)。对网络开发不是很熟悉,我不太确定从哪里开始寻找如何解决这个问题。

The URL returns (I believe) a JSON, but it starts with an extra ?(and ends with a ).

URL 返回(我相信)一个 JSON,但它以一个额外的?(并以)结尾。

Thanks for the help!

谢谢您的帮助!

Edit:
Here is a screenshot of the error I took. It appears the red highlighted text is from jQuery. Perhaps the URL I am passing in cannot be processed by $.getJSON()? enter image description here

编辑:
这是我采取的错误的屏幕截图。看起来红色突出显示的文本来自jQuery。也许 $.getJSON() 无法处理我传入的 URL? 在此处输入图片说明

Edit 2:
I added the following to my manifest as suggested by meda, but the error still persists:

编辑 2:
我按照meda 的建议将以下内容添加到我的清单中,但错误仍然存​​在:

"permissions": [
    "http://api.openweathermap.org/*" 
 ]

采纳答案by abraham

The URL includes callback=?this is a common pattern for JSONPwhere APIs that support it will wrap JSON in a simple JavaScript function. The response data gets handed to the JS function and avoids browser XHR restrictions. Simply remove callback=?from the API URL and you should be fine.

URL 包含callback=?这是JSONP的常见模式,其中支持它的 API 将 JSON 包装在一个简单的 JavaScript 函数中。响应数据传递给 JS 函数并避免浏览器 XHR 限制。只需callback=?从 API URL 中删除即可。

回答by meda

It's not the JSON that is invalid, it's a restriction of chrome apps for security purposes.

不是无效的 JSON,而是出于安全目的对 chrome 应用程序的限制。

You will need to give your app permission to load an external url.

您需要授予您的应用程序加载外部url.

This is done in the manifest file

这是在清单文件中完成的

"permissions": [
    "http://api.openweathermap.org/*" 
]