YeomanでChrome Extension開発環境を簡単作成

必要なもの

• node.js, npm, 適当なJavaScript用のエディタ
  自身の環境に合わせて適宜インストール!

• Yeoman
  Yeomanは、色々なJavaScript関連の雛形を自動生成してくれます.

# npm -g install yo

• Chrome拡張用のgenerator
  下記のコマンドでgeneratorをインストールしておく.

# npm -g install generator-chrome-extension

これでChrome拡張を作成するためのツール関連はセットアップ完了.

プロジェクト作成

適当にディレクトリを作成する.

$ mkdir my-first-extension
$ cd my-first-extension

Yeomanのgeneratorを実行する.

$ yo chrome-extension

何か色々聞かれるけど、適当に答えていく.

[?] What would you like to call this extension? my-first-extension
[?] How would you like to describe this extension? My Chrome Extension
[?] Would you like to use UI Action? No
[?] Would you like to use the Options Page? No
[?] Would you like to use the Omnibox? (Please input keyword) 
[?] Would you like to use the Content Scripts (Not Programmatic)? Yes
[?] Would you like to use permissions? Yes
[?] "Tabs" permission: No
[?] "Bookmarks" permission: No
[?] "Cookies" permission: No
[?] "History" permission: Yes
[?] "Management" permission: No

上記では、Contents Script, 履歴へのアクセスのみを許可する設定としている.)

入力が完了すると、雛形の生成および、一通りのモジュールのダウンロードをしてくれる.

$ ls app

でmanifesto.jsonが作成されているのが確認できるはず.

動かしてみる

Chromeの拡張機能画面から、「パッケージ化されていない拡張機能を読み込む...」を選択して、プロジェクトディレクトリ/appを指定すればよい.