Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cross domain error when calling website API from JavaScript in Chrome extension

I'm working on a small Chrome extension that will call the Remember the Milk API. Google has a good example using the Flikr API, and I'm using it as the basis for my extension. Their example works perfectly in my browser (latest Chrome on Linux).

When I swap out the Remember the Milk API method names and API key, though, I'm getting the following error:

XMLHttpRequest cannot load http://api.rememberthemilk.com/services/rest/?method=rtm.test.echo&api_key=xxxxxxxxxxxxxxxxxxxxxx&name=Test%20task. 
Origin chrome-extension://lifnmciajdfhj is not allowed by Access-Control-Allow-Origin.

My code looks like this:

    var req = new XMLHttpRequest();
    req.open(
            "GET",
            "http://api.rememberthemilk.com/services/rest/?" +
            "method=rtm.test.echo&" +
            "api_key=xxxxxxxxxxxxxxxxxxxxxxxxxx&" +
            "name=Test%20task", 
            true);
    req.onload = onResponseReceived;
    req.send(null);

    function onResponseReceived() {
        console.log("It worked.");
    }

Any suggestions?

like image 234
Josh Earl Avatar asked Dec 20 '11 03:12

Josh Earl


People also ask

How do I fix cross origin requests are only supported for protocol schemes Chrome Chrome extension https?

Just change the url to http://localhost instead of localhost . If you open the html file from local, you should create a local server to serve that html file, the simplest way is using Web Server for Chrome . That will fix the issue.

Can Chrome extensions make HTTP requests?

When building a Chrome extension, you can make cross-site XMLHttpRequests via Content Scripts or the Background Page. Content Scripts is JavaScript that can get injected into a webpage and can manipulate the page's DOM.

What permission is required for a Chrome extension to make XHR request on any domain?

Most Chrome extension developers assume that if their website is www.mydomain.com, and their Chrome extension makes XHR requests to www.mydomain.com, then you must put www.mydomain.com in the permissions field of your manifest file.


1 Answers

And ... solved, as usual, within a couple of minutes of posting here. The issue was the manifest.json file, which originally had the Flikr API permissions in it. I had updated them to point to Remember the Milk, but apparently you need to uninstall and reinstall the extension for the permissions to be reregistered.

Google has a good tutorial dealing with XHR in extensions.

Here's the updated manifest.json. Maybe it'll be helpful for someone else.

    {
        "name": "Remember the Milk",
        "version": "1.0",
        "description": "A Remember the Milk extension.",
        "browser_action": {
            "default_icon": "rtm.png",
            "popup": "popup.html"
        },
        "permissions": [
            "http://*.rememberthemilk.com/",
            "https://*.rememberthemilk.com/"
        ]
    }
like image 78
Josh Earl Avatar answered Jan 01 '23 19:01

Josh Earl