title: Chrome extension : failed to load resource for external json
body: <p>I've been searching stackoverflow and google for an answer for that but I can't find anything... I'm still really new to javascript, so I'm a bit confused;</p>
  
  <p>manifest.json</p>
  
  <pre><code>{
    "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"]
  }
  </code></pre>
  
  <p>popup.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Getting top streams from Twitch&lt;/title&gt;
      &lt;style&gt;
        body {
          min-width: 350px;
        }
      &lt;/style&gt;
      &lt;script src="twitch.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>twitch.js</p>
  
  <pre><code>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 = '&lt;ul&gt;';
  
      for (var i = 0; i &lt; streams.length; i++) {
        output += '&lt;li&gt;' + streams[i].channel.display_name + ' - ' + streams[i].channel.viewers + ' - ' + streams[i].channel.game + '&lt;/li&gt;';
      }
  
      output += '&lt;/ul&gt;';
      console.log(output);
      document.body.appendChild(output);
    }
  };
  
  /* Run the script as soon as the popup is loaded */
  document.addEventListener('DOMContentLoaded', function () {
    streamGenerator.requestStreams();
  });
  </code></pre>
  
  <p>Nothing appear in the popup, and the console says</p>
  
  <pre><code>Failed to load resource chrome-extension://dihpppnflhlpkehcgnjggjcipffmjlgp/http://api.twitch.tv/kraken/streams?limit=20
  </code></pre>
  
  <p>What to do???</p>
  
  <p>Thanks</p>