Following the "Getting Started" example, but getting an Access-Control-Allow-Origin error

Question

I have recently gained interest in Google Chrome Extensions, so I started looking into the basics.

Using the "Getting Started" page, I set off reading the entire thing, and writing the entire code locally to create an unpacked extension.

I ensured that all files exist, and that the code was exactly the same as provided on the "Getting Started" page. For some reason, I am receiving the following error:

XMLHttpRequest cannot load http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=90485e931f687a9b9c2a66bf58a3861a&text=hello%20world&safe_search=1&content_type=1&sort=relevance&per_page=20. 
Origin chrome-extension://hcijmehjcijoldbgapgllpmhebeaiihh is not allowed by Access-Control-Allow-Origin.

I made sure that my permissions were set for "http://api.flickr.com/", as stated in the "Getting Started" page, and pretty much any other documentation I could find. I am also aware of what an Access-Control-Allow-Origin rule is, dealing with the way the request header contains. However, I am unsure as to why I am receiving this error in this case, given the proper permissions in my manifest.json file. I have considered that perhaps this has to do with something locally, perhaps a configuration issue or whatnot -- but I have no idea where else to look.

My question is: How do I resolve this error?

I am running Google Chrome version 15.0.874.121 m

For completeness, here is the code used:

manifest.json:

{
    "name": "My First Extension",
    "version": "1.0",
    "description": "The first extension that I made.",
    "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
    },
    "permissions": [
        "http://api.flicker.com/"
    ]
}

popup.html:

body {
  min-width:357px;
  overflow-x:hidden;
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}



var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://api.flickr.com/services/rest/?" +
        "method=flickr.photos.search&" +
        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
        "text=hello%20world&" +
        "safe_search=1&" +  // 1 is "safe"
        "content_type=1&" +  // 1 is "photos only"
        "sort=relevance&" +  // another good one is "interestingness-desc"
        "per_page=20",
    true);
req.onload = showPhotos;
req.send(null);

function showPhotos() {
  var photos = req.responseXML.getElementsByTagName("photo");

  for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    img.src = constructImageURL(photo);
    document.body.appendChild(img);
  }
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
      ".static.flickr.com/" + photo.getAttribute("server") +
      "/" + photo.getAttribute("id") +
      "_" + photo.getAttribute("secret") +
      "_s.jpg";
}

stmcallister stmcallister · Accepted Answer · 2011-12-13T06:50:43

Look more closely at the permissions in your manifest.json. I think you'll have better luck with:

  "permissions": [
    "http://api.flickr.com/"
]

Following the "Getting Started" example, but getting an Access-Control-Allow-Origin error

1 Answers