質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Chrome extension

Chrome拡張機能

Q&A

解決済

1回答

1802閲覧

chrome extension内からjQueryの$.ajaxを用いて外部JSONPを取得する際Uncaught ReferenceErrorが発生する

starfish

総合スコア7

JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Chrome extension

Chrome拡張機能

0グッド

1クリップ

投稿2018/01/08 08:07

###前提・実現したいこと
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 ビット)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

下記にあるように,chrome sandbox内で実行されていることが原因のようでした.

https://qiita.com/fnobi/items/c560df9ccf45588e8bd8
https://stackoverflow.com/questions/8495825/jsonp-request-in-chrome-extension-callback-function-doesnt-exist

chrome extensionはデフォルトでcross-domain GETリクエストをサポートしているらしく,下記stackoverflow内にあるコードを参考に実装したところ,上手く動作することを確認しました.

投稿2018/01/08 08:29

starfish

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問