Question

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?

Answer 1

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/"
        ]
    }