Chrome Extension で Yahoo 雨雲ズームレーダを表示してみた

Yahoo 雨雲レーダーを表示する Chrome Extension を探したのですが、なかったので作ってみました。

簡単にできると思ったのですが、いくつかハマった点があったので紹介します。
Yahoo のサーバとは別に HTTP サーバが必要になるので、少しトリッキーな方法になります。

Yahoo API を利用するには Javascript に以下の記述が必要です。

<script type=”text/javascript” charset=”utf-8″ src=”http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】”></script>

http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

ですが、 Chrome Extension の Content Security Policy (CSP) により、src には http が指定できません。
セキュリティ上の理由で http は無効にしているようです。
https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing-remote-script
に詳細書いてあります。https であればホワイトリストに登録できるようですが http は中間者攻撃を食らう可能性があるので許可されてません。

Yahoo! Open Local Platform (YOLP) では、無料枠の利用は http となります。ちなみに YOLP Premire の場合は https が利用できるようです。

http がダメなので、回避策として外部 http サーバ + iframe を利用することにしました。ポップアップで表示する html に iframe で外部リソースを読み込ませることができます。

具体的には以下の実装になります。

manifest.json

{
  "manifest_version": 2,
  "name": "Yahoo 雨雲レーダー",
  "version": "0.1",
  "icons": {"48": "icon.png"},
  "browser_action": {
    "default_icon": "popup.png",
    "default_title": "Yahoo 雨雲レーダー",
    "default_popup": "popup.html"
  }
}

popup.html

<body>
  <iframe
    src="http://YOUR_HTTP_SERVER/PATH/yahoo-map.html"
    frameborder="0"
    style="border:none;width:300px;height:260px;">
  </iframe>
</body>

注意: iframe src に指定するURLは http にする必要があります。https にすると yahoo-map.html 内の <script src= で指定するスキームが http なので、 https と http ではブラウザのセキュリティに引っかかります。
また YOUR_HTTP_SERVER/PATH の所を外部HTTPサーバのURLに合わせてください。

yahoo-map.html (外部 http サーバに配置)

<html>
  <style>
    body {
      margin: 0px;
    }
  </style>
  <body>
    <div id="map" style="width:300px; height:260px"></div>
    <script type="text/javascript" charset="utf-8"
      src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=YOUR_API_ID"></script>
    <script type="text/javascript">
      window.onload = function() {
        var ymap = new Y.Map("map", {configure : {weatherOverlay: true}});
        ymap.addControl(new Y.SliderZoomControlVertical());
        ymap.addControl(new Y.LayerSetControl());
        ymap.drawMap(new Y.LatLng(39.0275, 137.4611), 5, Y.LayerSetId.NORMAL);
      }
    </script>
  </body>
</html>

注意: YOLP のアプリケーションID が必要になります。上記 “YOUR_API_ID” を書き換えてください。YOLP のアプリケーションIDは https://e.developer.yahoo.co.jp/register から登録します。

ソースコードは以下で公開してます。

https://github.com/ikesato/chrome-extension-yahoo-map-demo

今回試した環境です。