こんにちわChrome拡張

photo © 2007 Justin Watt | more info (via: Wylio)

HTML5の勉強をChrome拡張あたりで出来んかということでChrome拡張を触ってみる。いちおう本職は組込アプリなんですが、それなりのwebブラウザが乗ってるもんいじる機会が多くなってきたのでそろそろweb関連から逃げられない感じです。

こんにちわChrome拡張

公式のGetting Started（親切な日本語訳）ではFlickrから画像引きこんでどうこうやっているが、とりあえずホントのHello worldだけ。

Chrome拡張の構成

Chromeの拡張機能は以下のようなファイルによって構成される（拡張機能がテーマである場合はHTMLなかったりするが）。

• マニフェストファイル (manifest.json)
• HTMLファイル
• その他JavaScriptファイルや画像など必要なファイル

これらを1つのフォルダにまとめて.crxというちょっと変わったzipにパッケージングしたものがChrome拡張となる。

HelloWorld拡張作成

1.まず任意のフォルダを作成する。とりあえずHelloChromeExtensionフォルダとする。

2.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"

  }

}

3.同フォルダにアイコン用の画像icon.pngを保存する。19×19ピクセルのもの。

4.同じくHTMLファイルpopup.htmlを同じフォルダに保存。

<p>minamoChanKawaii!</p>

Chromeで読込

今回はパッケージ化せず、フォルダのまま読み込む。

レンチアイコンをクリックし、ツール→拡張機能 を選択。デベロッパーモードの横のボタンを-にしてパッケージ化されていない〜というボタンを押し、先ほど作ったフォルダを選択する。

上記操作により表示された先程のアイコン画像をクリックするとこうなります。

参考

• 公式リファレンス(英語)
• 親切な日本語訳

ときにHTML5とはなんぞや

Ajaxのデファクトその他をオープン仕様として策定してがんばってプロプライエタリなRIAプラットフォーム潰してえという流れっぽい。まだ仕様としてfixしてない(12年あたりに勧告予定らしい)けどおしゃれなwebブラウザで一部の機能が実装されてるのですでになんぼか使える。ときどき策定グループ内でケンカして仕様の一部が死んだりするらしい。