Using jQuery.ajax in a Google Chrome extension

Question

I use jquery.ajax function to post data from google chrome extension to my web service as code below:

$.ajax({
            type: "POST",
            url: serviceUrl,
            data: data,
            success: function(msg){
                if(typeof(Me.config.onSumitted) == "function"){
                    Me.config.onSumitted(msg);
                }
           },
           error: function(){
                if(typeof(Me.config.onError) == "function"){
                    Me.config.onError();
                }
           }
         });

but i get an error:

XMLHttpRequest cannot load http://todomain.com/Service.asp. Origin http://fromtabdomain.com is not allowed by Access-Control-Allow-Origin.

how can i resolve it?

Answer 1

you need to add a permission to you manifest.js file

"permissions": [
    "http://www.yourwebsite.com/"
  ],

Answer 2

its because same origin policy set crossDomain to true (ise jquery version 1.5 or higher)

$.ajax({
            type: "POST", //or GET
            url: serviceUrl,
            data: data,
            crossDomain:true,
            cache:false,
            async:false,
            success: function(msg){
                //do some thing
           },
           error: function(jxhr){
               alert(jxhr.responseText);
                //do some thing
           }
         });

Answer 3

I use native ajax to solve this problem.you can do that with following steps.

ajax = function(options, callback) {
  var xhr;
  xhr = new XMLHttpRequest();
  xhr.open(options.type, options.url, options.async || true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      return callback(xhr.responseText);
    }
  };
  return xhr.send();
};

Answer 4

As @ChristopheCVB pointed out http://code.google.com/chrome/extensions/xhr.html tells you what to do:

Please add a permissions section to your manifest.json:

{
  "name": "yourExtension",

  "permissions": [
    "http://fromtabdomain.com"
  ]
}