<Chrome extension>クロスドメインで怒られたら（XMLHttpRequest）

＜問題・課題＞

• Chrome拡張開発でクロスドメインを使いたい（外部API使ってhogehogeしたい）けど、ブラウザから怒られる

errorの内容

XMLHttpRequest cannot load ------. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '--------' is therefore not allowed access.

---

＜解決方法＞

参考：https://developer.chrome.com/extensions/xhr
（本家のドキュメントより）

※※やることは2つ※※
1. manifest.json > permissions の修正
2. XMLHttpRequestの利用　※ただし、１で設定したドメインからのみアクセス可能

1. manifest.json > permissions の修正

manifest.json

"permissions": [
    "http://api.example.com/" // api.example.comを使いますよの宣言
  ],

1. XMLHttpRequestの利用　※ただし、１で設定したドメインからのみアクセス可能

hoghoge.js

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // json を受け取る場合はparseしましょう
    var resp = JSON.parse(xhr.responseText);

    // innerHTMLは意図せずインジェクションするかもしれないのでinnerTextで回避
    document.getElementById("resp").innerText = xhr.responseText;
  }
}
xhr.send();