Google chrome exntension超入門。ブラウザ拡張が超簡単な件について
「#MA6 Mashup Camp - Chrome Extensions / Web Apps Day」というイベントに参加してきました。
Google chrome extension(わかりやすく言うと、web browserのプラグイン)作成を覚えてきたので、紹介しときます。
まとめ＆その他
- 必要な環境はchromeのみ。( + html, javascriptなどを編集するエディタ )
- 必要な知識はほぼjavascriptのみ。あとはextensionの構造やextension関係のAPIを理解すればだいたいOK.
たったこれだけでブラウザ拡張できるってすごくない？
そしてさらに
- デバッガなどのデベロッパーツールが充実している。
とりあえずchromeのインストール
Google chromeのインストールをします。
ここでダウンロード＆インストールしてください。
http://www.google.co.jp/chrome/
なんと、この時点で、chrome extensionの開発環境がほぼそろってしまいます。
Hello World的なもの
やはり最初はHello World.
Googleに「Tutorial: Getting Started (Hello, World!)」なるページがあるので、これに従って進めていきます。
http://code.google.com/chrome/extensions/getstarted.html
簡単に和訳(一部意訳).
必要なファイルやソースは上記リンクよりどうぞ。
extensionを作って読み込む。
1. これから作るextension用のディレクトリをどこかに作る。
2. そのディレクトリの中に次の内容のmanifest.jsonというファイルを置く。
3. icon.pngをダウンロードして、同じディレクトリに置く。
4. extensionを読み込む。
a. chrome右上の工具マークをクリック → ツール → 拡張機能。
b. 「＋デベロッパーモード」をクリックしてメニューを展開。
c. 「パッケージ化されていない拡張機能を読み込む」をクリック
d. manifest.json, icon.pngを置いたディレクトリを指定
extension設定が正しければ、次のスクリーンショットが表示される。
コードをextensionに追加する。
1. manifest.jsonに次の行を追加する。
2. manifest.json, icon.pngを置いたディレクトリにpopup.htmlを追加。popup.htmlはクリックしてダウンロードする。
3. chromeのextension管理ページで、「My First Extension」の「再読み込み」をクリックする。
chrome右上のextensionアイコンをクリックすると、popup.htmlの内容のポップアップが表示される。はい、これでextensionが完成しました。めちゃくちゃ簡単。
次の記事の内容予定
次は自作のextensionを作ってみて、簡単にアーキテクチャやソースを説明できればと思ってます。
今日のイベントで出たその他の話題など
- プロジェクト管理サービス「バックログ」はめちゃくちゃ便利
- web上でプレゼン資料が作成できる「Cacoo」はめちゃくちゃ便利
- http://cacoo.com/
- 「ペイント」で作成している場合じゃない笑
えーと、ところで、今日のイベントの報告のページ。自分の分は全面カットしてもらえませんかね笑
