GeekFactory

int128.hatenablog.com

Chrome Extensionのスクリーンショット作成を自動化した

applescript

Chrome Extensionをストアに公開するにはスクリーンショットを作成する必要があります。バージョンアップのたびに手作業が発生してつらかったので自動化してみました。

欲しいもの

私が公開しているChrome Extensionを例にして説明します。 chrome.google.com

このChrome Extensionは、新しいタブを開いた時のページをブックマーク一覧に差し替えるものです。したがって、新しいタブを開いた時の状態をスクリーンショットに収めることにします。

ChromeストアにChrome Extensionを掲載するにはスクリーンショットが必要です。そして、スクリーンショットの出来栄えは利用者数に直結します。

Chrome Extensionの動きが直感的に伝わるようにするため、スクリーンショットはウィンドウ枠を含めて撮ります。

https://lh3.googleusercontent.com/7YLAyjJZuvbzFBnrzs2EwLqo72e4OmMKraAfQ1VEVUy3MNAHCC5nFltxAIt9UMUPsOv5iF-sMQ=s640-h400-e365-rw

ストアに掲載するスクリーンショットは 1280×800 または 640×400 です。今のところ 1280×800 にすると画像が縮小されて文字がつぶれてしまうので、両方のサイズを掲載するといいみたいです。

https://lh3.googleusercontent.com/6VjP5TkxZsyYmMw0sk_zT7DnoKg7XrJxhs9_YEJk7HdT2UGzwHCPTlHAct2AGDDdIlLB_EIPGQ=s640-h400-e365-rw

ここでは以下の画像を作成する前提で話を進めます。

スクリーンショット作成の流れ

スクリーンショットにはデモ用のブックマーク一覧を表示させたいので、あらかじめデモ用の画面に切り替えておきます。そのため、Local Storageで特定のフラグを立てるとデモ用の画面に切り替わる仕組みをChrome Extensionに組み込んでいます。

スクリーンショット作成の流れをまとめると以下になります。

  1. Chromeで新しいウィンドウを開く。普段のブックマーク一覧が表示される。
  2. Local Storageを操作してデモフラグを立てる。
  3. ページをリロードする。デモ用のブックマーク一覧が表示される。
  4. スクリーンショットを作成する。
  5. Local Storageを操作してデモフラグを消す。
  6. Chromeのウィンドウを閉じる。

AppleScriptによるChromeの制御

Chromeを制御するツールはSeleniumやGebが有名ですが、今回はAppleScriptを使って実装します。

まず、新しいウィンドウを開きます。

tell application "Google Chrome"
  -- 新しいウィンドウ（ドロップシャドウを除いたサイズ）を開いてアクティブにする
  set chromeWindow to make new window with properties {bounds: {0, 0, 1168, 688}}
  activate
end tell

Local Storageを操作するため、JavaScriptを実行します。

  -- JavaScriptを実行してリロードする
  execute active tab of chromeWindow javascript "localStorage.setItem('demo', true)"
  reload active tab of chromeWindow
  delay 1

スクリーンショットを作成します。コマンドの詳細は後述します。

  -- スクリーンショットを作成する
  do shell script "screencapture -w build/screenshot1.png"
  do shell script "convert -crop 640x400+56+32 build/screenshot1{,s}.png"

最後に、デモフラグを削除してウィンドウを閉じます。一連の流れをスクリプトにまとめると下記になります。

tell application "Google Chrome"
  -- 新しいウィンドウ（サイズ指定）を開いてアクティブにする
  set chromeWindow to make new window with properties {bounds: {0, 0, 1168, 688}}
  activate
  delay 1

  -- デモフラグを立ててリロードする
  execute active tab of chromeWindow javascript "localStorage.setItem('demo', true)"
  reload active tab of chromeWindow
  delay 1

  -- スクリーンショットを作成する
  do shell script "screencapture -w build/screenshot1.png"
  do shell script "convert -crop 640x400+56+32 build/screenshot1{,s}.png"

  -- デモフラグを削除してウィンドウを閉じる
  execute active tab of chromeWindow javascript "localStorage.removeItem('demo')"
  close chromeWindow
end tell

screencaptureコマンドによるスクリーンショットの作成

OS Xでスクリーンショットを作成するには screencapture コマンドを使います。

ここではウィンドウのスクリーンショットを作成したいので -w フラグを指定します。下記を実行すると、スクリーンショットの対象ウィンドウを選ぶ状態になり、クリックしたウィンドウのスクリーンショットが作成されます。

screencapture -w build/screenshot1.png

デフォルトではウィンドウのまわりに影が付きます。-o フラグを指定すると影が付かなくなります。ちなみに、影のサイズは112ピクセルです。

ImageMagickによる画像の切り抜き

AppleScriptではImage Eventsを使って画像を切り抜くことができますが、切り抜きの始点を指定できないようです。切り抜きの枠が画像の中心に寄ってしまいます。

そのため、今回はImageMagickを使うことにしました。下記を実行すると、左上座標 x=56, y=32 から 640×400 を切り抜いたものが保存されます。

convert -crop 640x400+56+32 build/screenshot1{,s}.png

リリース手順への組み込み

自動化が完了したらリリース手順に組み込みます。

  1. リリースビルドを生成する。
  2. スクリーンショットを作成する。
  3. ChromeストアにZIPファイルをアップロードする。
  4. Chromeストアのスクリーンショットを更新する。

今回のソースコードは下記で公開しています。

https://github.com/int128/new-tab-bookmarks/blob/master/screenshot.applescriptgithub.com

(2015/5/3追記) 記事を再構成しました。