Posted at

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

More than 5 years have passed since last update.


必要なもの


  • 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を指定すればよい.