Chrome Extensions の開発環境、Tipsについて書いてみる

このエントリの目的

Chrome Extensionsの概要は知っている人向けに開発効率を上げるためにTipsを紹介します。Chrome ExtensionsのHello world レベルは作ったことがある人向けです。下記は、自分が作る際に参考にしている記事になります。作られたことのない方、これからちょっと作ってみようと思っているかたは、下記の記事を読まれてからがいいかなと思います。

Chrome拡張のお勧め記事

開発環境について

Eclipse(Javaの開発ツール)にAptana JS エディターを入れて使っています。下記のサイトよりダウンロード可能です。

http://mergedoc.sourceforge.jp/

Eclipseは、デフォルトの設定だと英語なのですが、便利なツールをセットにし、かつ、日本語化して配布しているプレアデスが導入が簡易でしょう。

ここでは、Aptanaを同梱している「Eclipse 3.4 Gyameda Plelades All in One」の「Ruby」or「Python」をお勧めします。

JRE付きがお手軽です。

このAptana Jsエディターは下記のような機能を持っています。

Aptana:クラス構造を綺麗に表示

Eclipse標準:複雑な構造は表示不能

Aptana:自分で作ったメソッドもばっちり入力補完

Eclipse標準:入力補完はほとんどNG

入力補完があると、作業は相当楽になると思いますのでぜひ使用を検討されてはいかがでしょうか？デフォルトで他のエディターで開かれてしまう場合は下記のように選択して開けばOKです。

大物を作らない場合、こんな大掛かりなものはエディタはいらないかもしれませんが、クラス等を定義し複雑なものを作る場合にはおすすめできるエディターです。

「パッケージ化されていない拡張機能を読み込みます」でロード

下記の手順でパッケージ化をしなくても、開発中のエクステンションをロードすることができます。
私は最初知らず、いちいちパッケージした上でロードしていたので、開発が大変でした・・・

拡張機能のページより、「パッケージ化されていない拡張機能を読み込みます」を選択し、

Eclipse上のフォルダを指定して

ロードできました。いちいちパッケージングしなくても動作確認できます。

Chromeでデバック

Chromeは、開発を助ける便利な機能をたくさん持っています。その一つにJavaScriptのデバッカがあります。

下記の要領でディベロッパーツールを起動して

Scriptsのタブよりブレークポイントの使用、変数の状態確認が可能です。

その他にも、console.log()で出力したメッセージの確認、ローカルストレージの内容確認、編集といった便利な機能があります。

まとめ

JavaScripterの方は、秀丸等のシンプルなエディターで作業されることが多いかとは思います。しかし、ツールをうまく使うことにより開発効率を上げれると思い、私の開発環境の例をさらしてみました。Chromeのエクステンションが自分でかけると結構できることが広がりますので、これを機にぜひチャレンジされてはいかがでしょうか？