title: Chrome extension cross-domain AJAX gives NETWORK_ERR: XMLHttpRequest Exception 101
body: <p>I'm creating a Disqus notifier Chrome extension. This involves making an HTTP call to disqus.com, but I can't get the AJAX call through - Chrome gives me the famous <code>NETWORK_ERR: XMLHttpRequest Exception 101</code> error.</p>
  
  <p>I read somewhere (can't recall where) that Chrome will block cross-domain AJAX calls from unpacked extension, so I've also tried packing my extension - but same result. I also understand that I can't do cross-domain AJAX from anywhere but a background page.</p>
  
  <p><em>manifest.json:</em></p>
  
  <pre><code>{
   "name": "Disqus notifier",
   "version": "1.0",
   "description": "Get notifications when you have new replies on your Disqus posts",
   "browser_action": {
     "default_icon": "icon.png",
     "popup": "popup.html"
   },
   "icons": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
   },
   "background_page": "background.html",
    "permissions": [
          "http://*/*",
          "https://*/*"
      ]
  }
  </code></pre>
  
  <p><em>background.html:</em></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript" src="background.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>background.js:</em></p>
  
  <pre><code>function poll() {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = handleStateChange; // Implemented elsewhere.
      xhr.open("GET", chrome.extension.getURL('http://disqus.com/api/3.0/messagesx/unread.json?user=&lt;...&gt;&amp;api_key=&lt;...&gt;'), false);
      xhr.send(null);
      console.log(xhr.responseText);
  }
  
  function handleStateChange() {
      if (this.readyState == 4) {
          var resp = JSON.parse(this.responseText);
          updateUi(resp);
      }
  }
  
  function updateUi(json) {
      console.log("JSON: ", json);
  }
  </code></pre>
  
  <p><em>popup.html:</em></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Disqus notifier&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          function updateButtonClicked() {
              chrome.extension.getBackgroundPage().poll();
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;button type="button" onclick="updateButtonClicked()"&gt;Update&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The <code>xhr.send(null);</code> line is what logs the <code>101</code> error. In the event handler <code>handleStateChange</code>, <code>this.responseText</code> is an empty string, causing <code>JSON.parse</code> to fail with <code>Unexpected end of input</code>.</p>
  
  <p>So: What am I missing in order to be allowed to make cross-domain AJAX calls?</p>