Unable to send cross-domain request in `Firefox` extension

Question

I am trying to access cross-domain data by using jsonp or XMLHttpRequest with GET method. My Code:

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/ajax.php?code=BSE", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        alert(xhr.responseText);
    }
xhr.send();

JsonP

$.ajax({
     type: 'GET',
     url: "http://example.com/ajax.php?code=BSE",
     dataType: "jsonp",
     jsonpCallback: "jsonp_callback",
     crossDomain: true,
     success: function(res){
         console.log(res);
     }
});

Both methods having same behavior. Whenever i am sending request its just keep loading (even i am not sure its sending request or not) and do nothing.

And my php code:

PHP Code:

header('content-type: application/json; charset=utf-8');
$dts=array('value'=>'123');
echo $_GET['jsonp_callback'] . '('.json_encode($dts).')';

Answer 1

The XMLHttpRequest will work just fine, no need for jsonp. In your manifest.json, make sure you request permissions for the domain you are posting to -- Chrome doesn't require permissions for XHR, but Firefox does. This error manifests in Firefox as a http code 404 in the XHR, but no activity in the network panel. If you get a http code 0, you have CORS or mixed content security issues as well.

{
  "manifest_version": 2,
  "name": "web extension",
  "version": "1",
  "permissions": [
    "http://example.com/"
  ],
  "content_scripts": [
    {
      // ...
    }
  ]
}

Answer 2

Try using new XDomainRequest() in your xhr request. XDomainRequest is an implementation of HTTP access control (CORS).

var createCORSRequest = function(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // Most browsers.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // IE8 & IE9
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
};

var url = 'http://example.com/ajax.php?code=BSE';
var method = 'GET';
var xhr = createCORSRequest(method, url);

xhr.onload = function() {
  // Success code goes here.
};

xhr.onerror = function() {
  // Error code goes here.
};


xhr.setRequestHeader('content-type', 'application/json; charset=utf-8');
xhr.send();