非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Chrome拡張機能の開発: サーバーとどうやって通信するか?

   

過去2回でGoogle拡張機能の開発について簡単な例を使って紹介しました。

広告

 

上記の方法は、あくまでローカル内での処理でしかありません。元々、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>
 

 

結果

結果は以下の通りです。

カレントページの情報がちゃんとサーバーに送られたことがわかると思います。この機能を使えばぬっくマークを作ることが可能かと思います。

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Chrome拡張機能開発, HTML/JavaScript