javascript - Chrome 不会加载 jquery 或 soundcloud api

Question

我正在尝试构建一个 chrome 扩展，但出于某种原因，我似乎无法向 SoundCloud 发出 API 请求或加载 Jquery。

我知道是因为这个:

我将这样加载 jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

在我的控制台中，我会收到

Failed to load resource: net::ERR_FAILED 
chrome-extension://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

同样的事情发生在 soundcloud api 上:

chrome-extension://api.soundcloud.com/tracks?q=buskers&client_id=xxxxxxxxxx&format=json&_status_code_map[302]=2

为什么 chrome-extension// 一直出现在 url 前面，我该如何阻止它？

Answer 1

根据Content Script Policy (CSP)，脚本资源只能从扩展程序包中加载。这将使扩展程序更加安全，并确保扩展程序只会执行您批准的代码。

解决方案 1:下载特定版本的 jQuery 文件，将其包含到您的包中，然后将其加载到文档中。

<script src="js/jquery.1.11.1.min.js"></script>

方案二:其实可以通过在manifest文件中定义资源来源白名单来放宽限制。可以引用this如果您出于某些原因需要加载外部 js 文件，请了解更多详细信息。

"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://api.soundcloud.com/tracks?q=buskers&client_id=xxxxxxxxxx&format=json&_status_code_map[302]=2; object-src 'self'"

注意:

白名单资源只允许通过以下协议(protocol)加载:HTTPS、chrome-extension 和chrome-extension-resource。如果要采用白名单方案，请使用https加载外部库。

如果要在白名单中定义多个域，请使用空格将域彼此分隔开。

"content_security_policy": "script-src 'self' https://domain1.com https://domain2.com;"