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

2016/12/14

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

Chrome拡張機能の開発を検討しています。理由は、もともと「Google BookMarks」のサードパーティの拡張アプリを利用していたのですが、なぜかアプリ数が大幅減ってしまい使いにくいものばかりになっていることと、Googleアカウントを切り替えるたびに同じBookMarksが使えないという実用上の問題があり、オリジナルアプリを作ろうと思った次第です。

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

Chrome拡張機能の開発：現在のページ情報をGETする

前回はChromeの拡張機能開発にあたって基本的な手順を紹介しました。 Googleブックマークのようなものを作ることが目的なのですが、現在開いているページのタイトルとURL情報を取得する必要があります。ページ情報をGETするにはChromeのライブラリを使う必要があります。

[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ページにアクセスするわけです。

1 manifest.json
2 popup.html
3 main.js
4 index.html (サーバー側)
5 結果

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]

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

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

manifest.json

popup.html

main.js

index.html (サーバー側)

結果

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