拒绝加载脚本 Chrome 扩展答案

【问题标题】：Refused to load the script Chrome Extension拒绝加载脚本 Chrome 扩展
【发布时间】：2015-04-21 15:07:36
【问题描述】：

我正在尝试调用此站点并返回一个 json 对象。在给定 CSP 的情况下，如何在我的 chrome 扩展中正确地与此 API 交互？

错误：拒绝加载脚本“http://thesaurus.altervista.org/service.php?word=smile&language=en_US&output=json&key=REMOVEDMYKEY&callback=thesaurus”，因为它违反了以下内容安全策略指令：“script-src 'self' chrome-extension-resource:”。

var word = "smile";
var s = document.createElement("script");
s.src = "http://thesaurus.altervista.org/service.php?word="+ word +"&language=en_US&output=json&key=REMOVEDMYKEY&callback=thesaurus";
document.getElementsByTagName("head")[0].appendChild(s);
function thesaurus(result) { 
  output = "";
  for (key in result.response) { 
list = result.response[key].list; 
output += list.synonyms+"<br>"; 
} 
if (output) 
document.getElementById("synonyms").innerHTML = output; 
}

【问题讨论】：

标签： javascript php json google-chrome google-chrome-extension

【解决方案1】：

您显示的 URL 明确表示它可以返回 JSON 对象。回调（JSONP 样式）是可选的。

您不能使用来自该域的 JSONP，因为 Chrome 的 Content Security Policy 用于扩展。虽然您可以add whitelisted domains 到该策略，但出于安全原因，HTTP 源是被禁止的。

相反，您希望将 JSON 响应捕获为字符串并对其进行解析。

您需要对该 URL 执行 XHR call：

function thesaurus(word) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    try {
      var result = JSON.parse(this.responseText);
      // Do something with the result
    } catch(e) {
      // Invalid JSON response
    }
  }
  xhr.onerror = function(e) {
    // Something bad happened
  }
  xhr.open(
    "GET",
    "http://thesaurus.altervista.org/service.php?word=" + word +
      "&language=en_US&output=json&key=REMOVEDMYKEY", 
    true
  );
  xhr.send();
}

您可能需要清单中的主机权限才能执行此操作，除非该服务器已从任何来源启用 CORS（顺便说一句，这对于这样的 API 是有意义的）。

  "permissions": [
    "*://thesaurus.altervista.org/*"
  ],

【讨论】：

【解决方案2】：

请检查您的脚本是否声明了所需的权限，如下所述： https://developer.chrome.com/extensions/xhr#requesting-permission
https://developer.chrome.com/apps/app_external#external

在您的清单中应该有类似的内容：

"permissions": [
  "*http://thesaurus.altervista.org/*"
],

【讨论】：