Chorme拡張機能の自作体験

Googleの公式ページにある入門用サンプルを利用して、Google Chromeの拡張機能（Extension）の自作を体験します。


次のページのサンプルを利用します。
Tutorial: Getting Started (Hello, World!)

拡張機能の作成と読み込み

1. デスクトップ（or 自分の好きな場所）にMyExtensionというフォルダを作成する
2. MyExtensionフォルダに、manifest.jsonというファイル名で次のテキストを保存する

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

3. MyExtensionフォルダに、icon.pngというファイル名で次の画像を保存する

icon.png

4. Chromeへ拡張機能を読み込む
  a. Chromeの設定メニューから、"ツール" → "拡張機能"を選ぶ

  b. "デベロッパーモード"の＋をクリックし、"パッケージ化されていない拡張機能を読み込む"をクリックする
  c. さきほど作成したMyExtensionフォルダを選択し、"OK"をクリックする

手順が正しければ、アドレスバーのすぐ横に、新しく読み込んだ拡張機能のアイコンが追加される。


拡張機能に機能を加える

1. MyExtensionフォルダのmanifest.jsonに次の部分（"popup": "popup.html"）を追加する

...
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  ...

MyExtensionフォルダに、popup.htmlというファイル名で次のリンク先を保存する。
popup.html

2. Chromeを再起動 or 拡張機能をリロードさせる
3. 新しく読み込んだ拡張機能をクリックすると、次のようにポップアップが表示される

以上が、Chrome拡張機能の自作体験です。
Chromeがそのまま実行環境になっているため、開発に必要な準備は、Chromeをインストールするだけです。コンパイラ等が必要なプログラミング言語やサーバーサイドの技術と比べると、とても簡単ですね！