Google Chrome Extensionを作ってみる。

　Software Design 2010年 05月号の紹介記事を読んでから、そのうちGoogle Chromeブラウザの拡張機能開発を試してみたいと思っていた。記事を読むと、Tabs APIをつかうと表示中の画面がキャプチャできるようなので、その機能を使ったエクステンションを作ってみる。

マニフェストファイル

まずは、マニフェストファイルを作成する。
今回は、ボタンを押すと画面をキャプチャし、その縮小画面をポップアップに表示する機能拡張とするので、マニフェストファイルは以下のようにした。

{
	"name": "画面キャプチャ",
	"version": "1.0",

	"description": "画面をキャプチャする拡張",

	"browser_action": {
		"default_icon": "camera2.png", 
		"default_title": "画面キャプチャ",
		"popup": "popup.html"
	},

	"permissions": [
		"tabs"
  	]
} 

ポップアップ

ポップアップのHTMLファイルは、以下のとおりとした。

ブラウザに組み込み

　3つのファイル（manifest.json、popup.html、camera2.png）を同じフォルダに入れておく。
　Chromeを立ち上げ、「拡張機能」タブを表示する。

　次いで、「パッケージ化されていない拡張機能を組み込みます」ボタンを押し、マニフェストファイルが入ったフォルダを選択すると、拡張機能が組み込まれる。

組み込み後の画面。右上にカメラのアイコンが表示されている。

　カメラボタンを押すと、表示中の画面がキャプチャされ、ポップアップで、その縮小画像が表示される。
　とりあえず、完成。

感想と今後の方針

　簡単な機能だけれど、すごく簡単に機能拡張できた。Chromeスゴイ。
　ただ、このままではキャプチャした画像が保存できないので、もう少し考えてみたい。Google Chromeのエクステンションは、基本JavaScript+HTMLみたいなので、キャプチャ画像を一度、phpに投げる必要がありそう。参考までに、画像はBase64でエンコードされて取得されるみたい。