google chrome 拡張機能と外部ドメイン

google chromeで拡張機能を作ってみようと思って、ドットインストールを一通り見て作ってみようと思ったんですね。で、まずはjQueryを使った普通のhtmlで動くものを作ってから、google chrome拡張機能に移行しようと考えていました。

jQueryと外部ドメイン

まず、jQueryでつまずいたのが、外部ドメインからのデータ取得ですね。jQuery.ajaxでURL指定してデータをとって来ようとしたら、次のようなエラーが出ました。

XMLHttpRequest cannot load "指定したURL". No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

外部サイトはダメなのかと思って、回避策を探していたら一番簡単そうなのが、これです。「jquery.xdomainajax.js」というのをダウンロードして読み込むだけ。あとは、普通のajaxの使い方でOKです。

jquery で クロスドメイン 外部ドメインのファイルにアクセス - まとめーたー

なんでこれでOKになるのかはよくわからないけど、中身を見ると、「Yahoo! Query Language」っていうのをかましてなんかうまいことやってるみたいですね（適当）。

ただ、話はこれで終わらないんですけどね。

google chrome 拡張機能と外部ドメイン

続いて、google chrome拡張の作成なんですが、ここはさらに外部のデータのやり取りが厳しく制限されていて、そもそもjQueryをCDN使って読み込んでいたんですが、これもダメみたいなんですね。なので、一度ちゃんとダウンロードしてローカルに落として読み込むようにしました。それが終わった後もまだエラーが出るんですね。「Yahoo! Query Language」を使っているところがどうやら怪しいわけです。ここでエラーが出てたんですね。

ここでエラーが出てたら、もう外部にアクセスできないじゃないか、とまたいろいろ調べてみて、参考になる記事を見つけました。「ChromeAppsでの外部リソースの扱い方」に書いてある通り、どうやら、XMLHttpRequestを使えばよいっぽいです。これを使うのであれば、もはやjquery.xdomainajax.jsすら使う必要がないわけですね。直接書いちゃいます。紹介したページはimgの例ですが、サイトの全体が対象である場合は、次のように書けばいけました。permissionsの設定をすることもお忘れなく。

    var xhr = new XMLHttpRequest();
    xhr.open('GET', "対象のURL", true);
    xhr.onload = function(e) {
      処理
    };
    xhr.send();

前の記事：

[web]アメブロは3カラムが一番いいんだろうな

次の記事：

OneNoteで僕がやりたかったこと全部できた