Basecamp API Request results in Access-Control-Allow-Origin Error

Question

I am trying to perform an AJAX request from a Chrome Extension to Basecamp to authenticate in so I can pull tasks. I have added https://site.basecamphq.com to the permissions in manifest.json. However, when this function is executed, I get this in my console:

XMLHttpRequest cannot load https://site.basecamphq.com. Origin chrome-extension://0123456789 is not allowed by Access-Control-Allow-Origin

$("#login").click(function()
{
    $.ajax({
        type: "GET",
        dataType: 'html',
        url: "https://site.basecamphq.com",
        username: "username",
        password: "X",
        success: function(data){
            $("#example").append(data);
            }
    });
});

I have added https://*/ to my manifest.json permissions as well, but no luck.

Answer 1

You need to use background page for doing AJAX requests from a content script.

Background page code:

chrome.extension.onRequest.addListener(function(request, sender, callback) {
     $.ajax({
        type: "GET",
        dataType: 'html',
        url: request.url,
        username: "username",
        password: "X",
        success: callback
    });
});

Content script code:

chrome.extension.sendRequest({'url': 'https://site.basecamphq.com'}, function(data) {
    $("#example").append(data);
});