title: Jquery ajax readystate 4 responsetext status 404 statustext error in chrome extension
body: <p>This is a simple chrome extension. This extension gets  url of the current tab and some other informations, then send it to my own server. It acts like a bookmarker. But ajax always failed.</p>
  
  <p><strong>panel.html</strong></p>
  
  <pre><code>&lt;body style="width:400px"&gt;
      &lt;form id="sender"&gt;
          Title &lt;input type="text" name="title"&gt;&lt;br /&gt;
          Category
          &lt;select&gt;
              &lt;option&gt;Sports&lt;/option&gt;
              &lt;option&gt;Edu&lt;/option&gt;
              &lt;option&gt;...&lt;/option&gt;
          &lt;/select&gt;&lt;br /&gt;
          Description&lt;br /&gt;
          &lt;textarea cols="25" rows="17" id="code" style="width:100%" name="description"&gt;&lt;/textarea&gt;&lt;br /&gt;
          URL &lt;input type="text" value="" name="url" id="url"&gt;
  
          &lt;b&gt;Bookamrk&lt;/b&gt;
      &lt;/form&gt;
      &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="panel.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>panel.js</strong></p>
  
  <pre><code>$(document).ready(function () {
      chrome.tabs.getSelected( function(tab) {
          $("#url").val(tab.url);
      });
      $("b").click(function() {
          //e.preventDefaultdf();
          $.ajax({
              dataType: 'json',
               type: "POST",
               method: "POST",
              url:    'http://myurl.com',
              data: $("#sender").serialize(), 
             success: function (data)
                   {
                      $('#sender').each(function () {
                          this.reset();
                       });
                     alert('Ok :) ');
                      },
              error: function(data){
                  alert(JSON.stringify(data));
              }
          });         
      });
  });
  </code></pre>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
    "manifest_version": 2,
  
    "name": "ChromeBookmarker",
    "description": "Des",
    "version": "1.0",
  
    "browser_action": {
     "default_icon": "19.png",
     "default_popup": "panel.html"
    },
    "permissions": [
     "activeTab"
     ]
  }
  </code></pre>
  
  <p>If I test <strong><em>panel.html</em></strong> normally, it works very well. However, I tested it as an extension it show :</p>
  
  <p>**readystate 4 responsetext status 404 statustext error **</p>
  
  <p><em>I am using jquery 2.2</em> and using this <a href="http://www.sitepoint.com/create-chrome-extension-10-minutes-flat/" rel="nofollow">tutorial</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>After many studying chrome's documents, I've changed something that you can see it :</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
    "manifest_version": 2,
  
    "name": "ChromeDL",
    "description": "For DL from Utube",
    "version": "1.0",
  
    "browser_action": {
     "default_icon": "19.png",
     "default_popup": "panel.html"
    },
    "permissions": [
      "tabs",
     "http://127.0.0.1:8000"
     ],
      "content_security_policy": "script-src 'self' http://127.0.0.1:8000; object-src 'self'"
  } 
  </code></pre>
  
  <p><strong>Popup.js</strong></p>
  
  <pre><code>$(document).ready(function () {
  
      chrome.tabs.getSelected( function(tab) {
        $("#url").val(tab.url);
      });
  
      $("b").click(function(e) {
          e.preventDefault();
          $.ajax({
             // type: "GET",
              dataType: 'jsonp',
              url: 'http://127.0.0.1:8000/testRest/test.php',
              data: $("#sender").serialize(), 
              //crossDomain: false,
             success: function (data)
                   {
                      $('#sender').each(function () {
                          this.reset();
                       });
                     alert('Ok :) ');
                      },
              error: function(data){
                  console.log(JSON.stringify(data));
              }
          });         
      });
  });
  </code></pre>
  
  <p><strong>test.php</strong></p>
  
  <pre><code>header("Content-Type: application/json");
  if(isset ($_GET['callback']))
  {
      $array = array(
      'fullname' =&gt; 'Jeff Hansen',
      'address' =&gt; 'somewhere no.3'
  );
  echo $_GET['callback']."(".json_encode($array).")";
  
  }
  </code></pre>
  
  <p>It returns this error in <strong>console.log</strong></p>
  
  <p><strong>Refused to load the script <a href="http://127.0.0.1:8000/testRest/test.php?callback=jQuery22008076173001900315l=http%3A%2F%2Fstackoverflow.com%2Fposts%2F35171982%2Fedit&amp;_=1454766689571" rel="nofollow">http://127.0.0.1:8000/testRest/test.php?callback=jQuery22008076173001900315l=http%3A%2F%2Fstackoverflow.com%2Fposts%2F35171982%2Fedit&amp;_=1454766689571</a> because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:"</strong></p>
  
  <p>I've used <a href="https://developer.chrome.com/extensions/contentSecurityPolicy" rel="nofollow">this document</a>, however, it doesn't work.</p>