###前提・実現したいこと
chrome extensionの開発をしており,内部でYahooのジオコーディングAPIを叩こうとしています.
実装するにあたり,jQueryの$.ajaxを使い,JSONP形式で取得することで実現しようとしていますが,エラーが発生してしまいます.
###発生している問題・エラーメッセージ
manifest.json
のcontent_scriptsに設定したページで動作させ,developer toolsで動作状況を確認したところ,以下のようなエラーが発生しています.
Uncaught ReferenceError: jQuery321038042353289711905_1515396210021 is not defined
###該当のソースコード
以下のようなmanifestファイル,jsファイルを作成し,https://teratail.com/
で動作させました.
manifest.json
json
1{ 2 "manifest_version": 2, 3 "name": "teratail test", 4 "description": "test", 5 "version": "1.0", 6 "content_scripts": [{ 7 "matches": ["https://teratail.com/*"], 8 "js": ["jquery-3.2.1.min.js", "app.js"], 9 "run_at": "document_idle" 10 }], 11 "permissions":[ 12 "https://map.yahooapis.jp/" 13 ] 14}
app.js
javascript
1$(function(){ 2 var appid = <MY_APP_ID>; 3 4 $.ajax({ 5 type: "GET", 6 url: "https://map.yahooapis.jp/geocode/V1/geoCoder", 7 data:{ 8 appid : appid, 9 query : "東京都千代田区1-1-1", 10 output : "json" 11 }, 12 dataType: "jsonp", 13 success : function(json){ 14 console.log(json); 15 } 16 }); 17});
その結果,developer tools上では,下記のような正しいレスポンスが返ってきているようです.
https://gist.github.com/anonymous/8130d21b06cf24582321f4fc84d558ac
エラーメッセージを見る限り,そのあとsuccessに割り振る部分がうまく動いていないように見えます.
###試したこと
まず,chrome extensionではなく,通常のjavascriptで書いて上手く動作するか検証しました.
検証に用いたコードは下記の通りです.
HTML
1<html> 2 <head> 3 <title></title> 4 <script src="./jquery-3.2.1.min.js"></script> 5 <script type="text/javascript"> 6 7 var url = "https://map.yahooapis.jp/geocode/V1/geoCoder"; 8 var appid = "<MY_APP_ID>"; 9 var query = "東京都千代田区千代田1-1-1"; 10 11 $(function() { 12 $.ajax({ 13 type: "GET", 14 url : url, 15 data : { 16 appid : appid, 17 query : query, 18 output : 'json' 19 }, 20 dataType: "jsonp", 21 success : function(json){ 22 console.log(json); 23 } 24 }) 25 }); 26 </script> 27 </head> 28 <body> 29 </body> 30</html>
その結果,console上に結果がきちんと返ってくることを確認しました.
また,chrome extension内でcallback関数名を手動で入れた場合の検証も行いました.
app.js
javascript
1$(function(){ 2 var appid = <MY_APP_ID>; 3 4 function mycallback(json){ 5 console.log(json); 6 } 7 8 $.ajax({ 9 type: "GET", 10 url: "https://map.yahooapis.jp/geocode/V1/geoCoder", 11 data:{ 12 appid : appid, 13 query : "東京都千代田区1-1-1", 14 output : "json" 15 }, 16 dataType: "jsonp", 17 jsonpCallback : "mycallback", 18 success : function(json){ 19 console.log(json); 20 } 21 }); 22});
その結果,console上のエラーメッセージは下記のように変化し,依然として結果は出力されませんでした..
Uncaught ReferenceError: mycallback is not defined
###補足情報
OS : macOS Sierra 10.12.6
Google chrome : 63.0.3239.84(Official Build) (64 ビット)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。