Google Chrome拡張機能クロスドメインXMLHttpRequest

Question

Google Chrome用のシンプルな拡張機能を作成しましたが、辞書APIにアクセスする際に問題があります。 APIは、拡張機能を実行するドメインとは異なるドメインで動作します。 このトピックのすべてのStackOverflowスレッドを読みましたが、この問題を解決できませんでした。

私はアクセス許可にAPIのアドレスを追加しました。それは機能していなかったので、私はhttp://*/*によってテストの目的のためにそれを交換しました。私は、API呼び出しを行うするJavascriptの機能がある

{ 
"name": "web2memrise", 
"version": "0.3", 
"manifest_version": 2, 
"permissions": ["http://*/*"], 
"content_scripts": [{ 
    "matches": ["<all_urls>"], 
    "js": ["jquery.min.js", "contentscript.js"], 
    "css": ["style.css"] 
}], 
"web_accessible_resources": ["script.js", "jquery.min.js"] 
} 

：私は、次のmanifest.jsonを持って

function translateCallback(json){ 
    var translations = ""; 
    for(var phrase of json){ 
     translations += ", "+phrase.text; 
    } 
    translations = translations.substring(2).replace(", ", "\t") 
    popupContent(translations) 
} 

function translate(l1, l2, phrase){; 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "http://deu.hablaa.com/hs/translation/"+phrase+"/"+l1+"-"+l2+"/", true); 
    xhr.onreadystatechange = translateCallback 
    xhr.send(); 
} 

しかし、それは私に次のエラー与える：

home:19 GET http://nxtck.com/as.php?zid=48360&clbk=nextperf net::ERR_BLOCKED_BY_CLIENTloadScript @ home:19window.onload @ home:37 
(index):1 XMLHttpRequest cannot load http://deu.hablaa.com/hs/translation/solution/fra-eng/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.lefigaro.fr' is therefore not allowed access. 
script.js:44 Uncaught TypeError: json[Symbol.iterator] is not a function 

Answer 1

ああI」を前に質問に答えたことはありません。私の書式設定が残念であれば謝ります。

第1に、「xhr.onreadystatechange = translateCallback」は問題の根源であり、恐らくエラーの小さな雪上の影響を引き起こします。だから私はそれを解決するために小さな変更を加えました。また、関数のパラメータの順序をURLで使用されている順序に合わせて変更しました（私が少し簡単に従うようにします）。

api docsはすべてが小文字でなければならないと述べていますので、translate（）関数に追加しました。 responseType = jsonも追加されました。不正なパラメータが404エラーになり、「Access-Control-Allow-Origin」エラーが発生することに注意してください。

私は自分のbackground.jsで実行したことを、コンテンツスクリプトでも扱っています。すべては私のために働いたこと

function translateCallback(json) { 
    var translations = ""; 
    for (var phrase of json) { 
     translations += ", " + phrase.text; 
    } 
    translations = translations.substring(2).replace(", ", "\t"); 

    /* console for testing only */ 
    console.log(translations); 

    /* uncomment this, commented out for testing */ 
    //popupContent(translations); 
} 

function translate(phrase, l1, l2) { 
    var url = "http://deu.hablaa.com/hs/translation/" + phrase + "/" + l1 + "-" + l2 + "/"; 

    /* api requires lowercase */ 
    url = url.toLowerCase(); 

    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url, true); 

    /* added json for responseType */ 
    xhr.responseType = 'json'; 

    /* onload function added */ 
    xhr.onload = function() { 
     if (xhr.status === 200) { 
      translateCallback(xhr.response); 
     } 
    }; 

    /* error function added */ 
    xhr.onerror = function() { 
     /* error */ 
    }; 

    /* this was causing problems and need to be removed */ 
    //xhr.onreadystatechange = translateCallback 

    xhr.send(); 
} 
translate('blume', 'deu', 'eng'); 

ので、私はあなたのためにそれを期待:)