Extensions Reloaderとguard-shellでサクサクChrome Extension開発

Chrome Extensionの開発中における、
ファイル修正 ⇒ 拡張機能ページ開く ⇒ リロード ⇒ 確認
の手間を軽減。ファイル更新を検知して自動更新を実現します。意外と手間なんですよね。

Mac環境用です

必要なもの

• Extensions Reloader
  • https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid
• guard-shell
  • https://github.com/guard/guard-shell

手順

Extensions Reloader インストール

インストールされているExtensionを一括リロードしてくれるChrome Extensionです。Chrome WebStoreからインストール。

ツールバーのボタンを押すか、http://reload.extensionsを開く事でExtensionがリロードされます。

guard-shell インストール

ファイルシステムを監視してくれるgem、Guardのプラグインです。Ruby1.9.2以上が必要です。

ここではbundle installします。

Gemfile

source "https://rubygems.org"

gem 'guard-shell'

Guardfileを作る

$ bundle exec guard init shell

Guardfileのサンプルファイルが生成されます。これを下記のように修正

Guardfile

guard :shell do
  watch /(js|html)$/ do
    `open -g http://reload.extensions`
  end
end

監視対象のファイルは、Guardfileのwatchの部分に指定します。

guardを起動する

$ bundle exec guard

この状態でファイルを変更すると、自動でExtensionがリロードされます。benry!