BLOG.tass.io

YeomanでChrome拡張の雛形を一発生成する手順

2014-03-12

勢い余ってメモったもの。

事前準備

nodejsとnpmはもはやフロントエンジニアには必須。
YeomanとChrome拡張用のジェネレータをインストールしておくこと。

 $ npm install -g yo
 $ npm instlal -g generator-chrome-extension

Yeoman実行

Hey!Yo!

 $ yo chrome-extension

ウィザードの選択肢

[?] What would you like to call this extension?

Chrome拡張の名前を入力(45文字以内)
一意な名前である必要があります。
ちなみに下記の画面で表示されます。

  • インストール時のダイアログ
  • Chrome拡張の管理画面
  • Chromeウェブストア

[?] How would you like to describe this extension?

Chrome拡張機能の説明を入力します。プレーンテキスト。
HTMLその他のフォーマットは使えません。132文字以内。

[?] Would you like to use UI Action? (Use arrow keys)

❯ No
   Browser
   Page

ブラウザのツールバーにUIアクション用のアイコンを表示させるかの設定です。

  • Noを選択した場合は特にUIアクションはないということで、ツールバーには追加で表示されることはありません。

  • Browserを選択した場合は、Browser Actionのデフォルトの設定が追加されます。
    アドレスバーの右側、設定アイコンの左側にアイコンが表示されます。\

    ブラウザ起動中は常に表示され続けるので、どのページを見ていてもUIアクションさせたいときはこちらを使います。

  • Pageを選択した場合は、Page Actionのデフォルトの設定が追加されます。
    アドレスバーの中(右端)にアイコンが表示されます。\

    特定のURLを表示させている間だけUIアクションを実行可能にしたい場合は、こちらを使います。

[?] Would you like more UI Features? (Press to select)

 ❯ ⬡ Options Page
    ⬡ Content Scripts
    ⬡ Omnibox

UI機能を追加するかの選択です。(複数選択可)

  • Options Pageは、オプション画面(Chrome拡張の個別の設定)を持つかどうか。
  • Content Scriptsは、Webページ上で動作するContent Scriptを持つかどうか。
  • Omniboxは、アドレスバーにキーワードを入力した時にサジェストして、ユーザが選択した際にはアクションが実行できるようになります。

[?] Would you like to use permissions? (Press to select)

 ❯ ⬡ Tabs
    ⬡ Bookmarks
    ⬡ Cookies
    ⬡ History
    ⬡ Management

Chrome拡張にパーミッションを付与するかの設定です。(複数選択可)

  • Tabs - ウィンドウやタブにアクセスできるようになります。
    chrome.tabs.*APIが使えるようになります。
  • Bookmarks - ブックマークにアクセスできるようになります。
    chrome.bookmarks.*APIが使えるようになります。
  • Cookies - クッキーにアクセスできるようになります。
    chrome.cookies.*APIが使えるようになります。
  • History - 閲覧履歴にアクセスできるようになります。
    chrome.history.*APIが使えるようになります。
  • Management - 設定管理機能にアクセスできるようになります。
    chrome.management.*APIが使えるようになります。

生成

ここまで選択すれば完了です。あとは自動でやってくれます。

  1. スケルトンファイルの生成(manifestや各種スクリプト)
  2. bowerを実行して依存ライブラリを自動取得
  3. gruntでプレビルドの実施

HiHo!


Michael Kuroneko

Written by Michael Kuroneko. Follow me on twitter, github.