Chrome Extension generatorを使ってChrome Extensionを開発する

    Chrome Extensionの開発について今っぽくgruntとかbowerとか使って開発しようと思って調べていたら, Yeomanにgenerator-chrome-extensionというgeneratorがあって, これを使うとサクッとChrome Extension のテンプレートが作れたので, メモ代わりにブログに書いてみた.

    インストール

    インストールする前に, 当然yeomanが必要なので, yeomanをインストールする. node.js, npmがインストールされていれば 以下のコマンドでyeomanをインストールする.

    npm install -g yo mocha

    generator-chrome-extensionでは, デフォルトのテストフレームワークとしてmochaを採用しているので, ついでにインストールしておくと良い. 次に, generator-chrome-extensionをインストールする. インストールは至って簡単で, 以下のコマンドでインストールする.

    npm install -g generator-chrome-extension

    使い方

    まず, アプリのひな形を作成する. yeomanのコマンドを用いて作成する.

    mkdir path-to-my-chrome-extension
    cd  path-to-my-chrome-extension
    yo chrome-extension

    この時, アプリ名や初期アプリの構成を聞かれるので, 必要に応じてチェックをいれる.

    ディレクトリ構成

    ひな形作成時にすべてのチェックを外すと, 概ね以下のディレクトリ構成となる.

    .
    ├── Gruntfile.js
    ├── app
    │   ├── _locales
    │   │   └── en
    │   │       └── messages.json
    │   ├── bower_components
    │   ├── images
    │   │   ├── icon-128.png
    │   │   ├── icon-16.png
    │   │   ├── icon-19.png
    │   │   └── icon-38.png
    │   ├── manifest.json
    │   ├── popup.html
    │   ├── scripts
    │   │   ├── background.coffee
    │   │   ├── background.js
    │   │   ├── chromereload.coffee
    │   │   ├── chromereload.js
    │   │   ├── popup.coffee
    │   │   └── popup.js
    │   └── styles
    │       └── main.scss
    ├── bower.json
    ├── dist
    │   ├── _locales
    │   │   └── en
    │   │       └── messages.json
    │   ├── images
    │   │   ├── icon-128.png
    │   │   ├── icon-16.png
    │   │   ├── icon-19.png
    │   │   └── icon-38.png
    │   ├── manifest.json
    │   ├── popup.html
    │   ├── scripts
    │   │   ├── background.js
    │   │   ├── popup.js
    │   │   └── vendor.js
    │   └── styles
    │       └── main.css
    ├── package
    │   └── password generator-0.0.4.zip
    ├─node_modules
    ├── package.json
    └── test
        ├── bower.json
        ├── index.html
        └── spec
            └── test.js

    Gruntタスク

    ひな形作成時に, 様々なタスクが追加されているが, 主に開発で利用するタスクを紹介する.

    debug

    debugタスクはgrunt-contrib-watchを用いて, 各ファイルの変更を監視し, bowerでインストールした外部ライブラリの自動ロード, SassやCoffeeScriptのコンパイル, エクステンションのリロードまで自動で行ってくれる. 開発中はずっと起動しっぱなしになると思う.

    また, http://localhost:4000/appディレクトリの内容を配信するローカルのサーバーが立ち上がるため, そちらでデバッグすることもできる. (もちろんlivereloadも行ってくれる)

    build

    buildタスクは/appディレクトリから, エクステンションをリリースするときに必要なzipの生成を行うタスク. この時, 各種ファイルのコンパイルやjs・cssの結合と圧縮など, 静的ファイルの最適化は自動で行ってくれる.

    生成されたzipファイルは/packageに, {appname}-{version}.zipという名前で保存される. ちなみにバージョンは, その時のmanifest.jsonのバージョンに, ビルドバージョンがインクリメントされたものとなる(同時にmanifest.jsonも更新される).

    zip圧縮前のアプリは/distに保存されている. リリース前には, 念の為にこちらのディレクトリをエクステンションとして読み込んで動作確認をした方がいいかもしれない.

    Tips

    エクステンションを開発していて気づいたTipsを上げていく.

    外部ライブラリの読み込み

    外部ライブラリの読み込みは, bowerを通じて行う. 例えばunderscore.jsを利用したい場合は以下のようにする.

    bower install --save underscore

    すると/appディレクトリにライブラリがインストールされ, 同時にライブラリを自動でロードされる. 具体的には, bower install後に, /appディレクトリ直下にあるHTMLファイルの, <!-- bower:css --> <!-- endbower -->, または<!-- bower:js --> <!-- endbower -->と記述された場所に追記が行われる. なので自分でHTMLファイルを追加する際には, <!-- bower:css --><!-- bower:js -->を適切な箇所に記述しておく必要がある. だいたいyeomanが作ったHTMLファイルを参考に(というかコピペ)すれば良い.

    ちなみにこれはgrunt-bower-installを用いてgruntが処理を行っている.

    HTMLファイルの手動追加

    HTMLファイルを/app内に作成したら, Gruntfile.jsuserminPrepareタスクのhtmlの配列に, 作成したHTMLファイルを追記しておく. こうしないと, /distディレクトリにコピーが行われなく, パッケージ時にこまる.

    Chromeに読み込んだエクステンションのデバッグ

    Chromeに読み込んだエクステンションのコンソールは, 設定画面のExtensions > デバッグしたいエクステンション > Inspect viewsから確認できる.

    参考リンク


    Yuichiro MUKAI
    Yuichiro MUKAIGame & Web Programmer

    シブヤで働くゲームプログラマー. C#(For Unity)をメインに, 趣味でPHPなどを書きます.

    Twitter / Facebook