Google Chrome拡張機能のHelloWorldをやってみる

初めて、ブラウザ拡張機能のGoogle Chrome Extensionsを触ってみた。

まずは、おきまりのHello　Worldを下記のページを見ながらやってみる。

ちなみに、このサンプルは、RESTを利用してその画像情報を表示するみたいな
感じのサンプルになっています。

http://code.google.com/chrome/extensions/getstarted.html

ここによれば、とりあえず、簡単な流れとしては、

１.任意のフォルダを作る。
２．そこに、下記の３つのファイルを作成する。
manifest.json
icon.png
popup.html
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html?content-type=text/plain

３．manifest.jsonの中に「"popup": "popup.html"」という文字を追記する。

manifest.jsonの完成系は、下記のような感じ

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

４．あとは、google chromeを起動して上部の設定ボタンより「拡張設定」を選択し
「デベロッパーモード」をクリックして「パッケージ化していない拡張機能を読み込みます」
をクリックして、さっきの3ファイルが置いてあるディレクトリを選択することにより
無事ブラウザの上のほうにボタンが表示され、それをクリックするとポップアップ画面が
表示されそこに画像が表示される

という感じに動作した。

popup.htmlの中はjavaScriptになっているようで、あるサーバからRESTの
メッセージを受け取ってその画像を表示するというような感じになっている
ようです。

次は、下記のページなどを見ながら、Google Chrome Extensionsでできることを
みていきたいと思います。
http://code.google.com/chrome/extensions/overview.html