2011年1月19日水曜日

こんにちわChrome拡張

HTML5 fist, after A List Apartphoto © 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ピクセルのもの。

icon

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

<p>minamoChanKawaii!</p>

Chromeで読込

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

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

パッケージ化されていない拡張機能の読み込み

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

kawaii

参考

ときにHTML5とはなんぞや

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

0 件のコメント:

コメントを投稿