Chrome拡張機能の開発: サーバーとどうやって通信するか?
過去2回でGoogle拡張機能の開発について簡単な例を使って紹介しました。
[ad#top-1]
上記の方法は、あくまでローカル内での処理でしかありません。元々、Googleブックマークのようなものを作るつもりだったので、データはサーバーのDBに保存したいし、どのパソコンからでもブックマークが覗けるようにしやいので、サーバーと通信できるようにしなければなりません。
拡張機能で直接Webページを表示してくれると楽なのですが、残念ながら、manifest.jsonに “default_popup”: “http://www.yahoo.co.jp” と記述してもYahooページを見ることができません。
なので、拡張機能でのホーム画面はあくまでローカルにあるHTMLファイルへのアクセスとなり、そのローカルHTMLからサーバーにアクセスするという流れとなります。
その方法をあれこれ悩みましたが、iframeを使うという単純な方法に行き着きました。本体のpopup.htmlは全体がiframeで囲われていて、その中からサーバー上のWebページを覗き見る、という感じです。
以下がイメージ図。iframeを通してネット上のWebページにアクセスするわけです。
manifest.json
こちらは前回のままで変わりありません。
popup.html
今回はjqueryを使いました。main.jsは後述しますが、そこからframe属性のdiv要素に動的に生成されたiframeが書き込まれます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body style="min-width:250px;margin:0px;"> <div id="frame"></div> </body> </html>
main.js
こちらがpopup.htmlにiframeを生成するためのJavaScriptです。カレントページのタイトルとURLをGET送信しています。
window.onload = function() { chrome.tabs.getSelected(null, function(tab) { var t = tab.title; var u = tab.url; var html = '<iframe src="http://***/index.html?title=' +t+ '&url=' +u+ '" frameborder="0" height="200"></iframe>'; $("#frame").html(html); }); };
index.html (サーバー側)
次にサーバー側に置くHTMLファイル index.htmlです。iframeからのGETデータを受け取って、div要素に展開しています。
拡張機能で認識したページ情報をサーバー側で受け取れれば、ブックマークの基本的な機能は抑えられると思います。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Google拡張機能テスト</title> </head> <body> <h3>Test</h3> <hr /> <div id="title"></div> <div id="url"></div> <script type="text/javascript"> var query = document.location.search.substring(1); document.getElementById('title').innerHTML = decodeURI(query.split('&')[0]); document.getElementById('url').innerHTML = query.split('&')[1]; </script> </body> </html>
結果
結果は以下の通りです。
カレントページの情報がちゃんとサーバーに送られたことがわかると思います。この機能を使えばぬっくマークを作ることが可能かと思います。
[ad#ad-1]
スポンサーリンク