Chrome扩展程序：无法加载外部JSON资源

Question

Chrome扩展程序：无法加载外部JSON资源

javascriptjsonapigoogle-chrome-extension

3

我已经在StackOverflow和Google上搜索了答案，但是没有找到任何有用的信息......由于我对JavaScript还很陌生，所以有点困惑；

manifest.json

{
  "manifest_version": 2,

  "name": "Twitch Streams List",
  "description": "Find all the streams directly through Chrome",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
   "permissions": [
    "http://api.twitch.tv/kraken/streams?limit=20"
  ],
  "web_accessible_resources": ["twitch.js"]
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting top streams from Twitch</title>
    <style>
      body {
        min-width: 350px;
      }
    </style>
    <script src="twitch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

twitch.js

var streamGenerator = {
  /* url where to get the streams from */
  url: chrome.extension.getURL('http://api.twitch.tv/kraken/streams?limit=20'),

  /* go get the streams from the json at the url given */
  requestStreams: function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', this.url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        var resp = JSON.parse(xhr.responseText);
      }
    }
    xhr.send();
  },

  /* import the streams in the html page */
  showStreams: function (e) {
    var streams = resp.streams;
    var output = '<ul>';

    for (var i = 0; i < streams.length; i++) {
      output += '<li>' + streams[i].channel.display_name + ' - ' + streams[i].channel.viewers + ' - ' + streams[i].channel.game + '</li>';
    }

    output += '</ul>';
    console.log(output);
    document.body.appendChild(output);
  }
};

/* Run the script as soon as the popup is loaded */
document.addEventListener('DOMContentLoaded', function () {
  streamGenerator.requestStreams();
});

弹出窗口中没有任何内容显示，控制台显示：

Failed to load resource chrome-extension://dihpppnflhlpkehcgnjggjcipffmjlgp/http://api.twitch.tv/kraken/streams?limit=20

怎么办？

谢谢

- Jauny

“http://api.twitch.tv/kraken/streams?limit=20”没有在您的安装目录中，因此不要将其作为参数传递给chrome.extension.getURL。 - danronmoon

2个回答

1

值得注意的是：

http://api.twitch.tv/kraken/streams?limit=20 返回404

https://api.twitch.tv/kraken/streams?limit=20 返回JSON

(Twitch API需要SSL)

- JDStraughan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- danronmoon · Accepted Answer

'api.twitch.tv/kraken/streams?limit=20' 没有在你的安装目录中，所以不要将其作为参数传递给chrome.extension.getURL。

也就是说，XHR无法跨域获取内容。您可以尝试查看是否提供了类似JSONP的替代方案。