Chrome extension and 'Access-Control-Allow-Origin'

When developing chrome extensions, I wanted to use the XMLHttpRequest like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var xhr = (function() {
    var xhr = new XMLHttpRequest();
    return function(method, url, callback) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                callback(xhr.responseText, xhr.status);
            }
        };
        xhr.open(method, url);
        xhr.send();
    };
})();

xhr('GET', 'https://foobar.com', function(data, status) {
    // Some stuff
});

However, just doing that does not work. You will receive the following error:

1
XMLHttpRequest cannot load https://foobar.com. The 'Access-Control-Allow-Origin' header has a value 'https://foobar.com' that is not equal to the supplied origin. Origin 'chrome-extension://azertyuiopqsdfghjklm' is therefore not allowed access.

The only thing you need to do is to modify your manifest.json and add the correct permissions:

1
2
3
4
5
{
    "permissions": [
        "https://foobar.com/**/*",
    ]
}