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

2016/12/14

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

Webサイトのブックマークに「Google BookMarks」のChrome拡張アプリを利用しているのですが、なぜか対応するアプリ数が大幅減ってしまい使いにくいものばかりになっていることと、Googleアカウントを切り替えるたびに同じBookMarksが使えないという実用上の問題があり、Chrome拡張機能でオリジナルアプリを作ろうと思った次第です。今回は拡張機能開発にあたっての、基本的な手順を書きました。ローカルでプログラムを用意し、Chromeの拡張機能に組み込むまでの簡単な手順です。完成イメージ今回作るプログラムの完成イメージは以下の...

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

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

前回はChromeの拡張機能開発にあたって基本的な手順を紹介しました。 Googleブックマークのようなものを作ることが目的なのですが、現在開いているページのタイトルとURL情報を取得する必要があります。manifest.jsonmanifest.jsonは以下の通りです。前回と違うところは、7行目の "permissions": , の部分。これを入れることでページ情報をGETできるようになります。 main.jsページ情報を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>