Chrome拡張機能作成をGithookを使ってラクにする

結論

Chrome 拡張機能を公開する時に、 Chrome Web Store に拡張機能のソースコードが入った zip ファイルをアップロードする必要がある。
手動で zip 化をしてもよいが、今回は Githook を使って commit 時に自動で zip ファイルを作成する。

課題

• ローカルにある zip ファイルが最新かわからなくなる。
• 常に最新の zip ファイルを自動的に生成していれば、悩まなくて済む。

やり方

• Githook の pre-commit を使い、 commit が発生したら、都度 zip 化する。
• Chrome 拡張機能は軽量なコードになることが多いので、都度 zip を生成しても負担は少ない。

リスト

1. .githook の場所を変更
2. pre-commit ファイルを作成
3. pre-commit ファイルに実行権限を付与
4. （好み）.gitignore で zip ファイルを除外

.githook の場所を変更

本来 .git/hooks にあるフォルダをプロジェクトのルートディレクトに見るようにする。
これにより、この後に作成する pre-commit のファイルを git 管理下に置く。

git config --local core.hooksPath .githooks

2. pre-commit ファイルを作成

mkdir -p .githooks && touch .githooks/pre-commit

-p オプションは、親ディレクトリが存在しない場合に、それも一緒に作成することを指示します。

作成した pre-commit ファイルの中身は下記のようにする。

#!/bin/bash

# 圧縮するフォルダ名
EXTENSION_FOLDER="extension"

# zipファイル名
ZIP_FILE="extension.zip"

# 圧縮コマンド
zip -r "$ZIP_FILE" "$EXTENSION_FOLDER"

3.pre-commit ファイルに実行権限を付与

忘れがちですが、実行権限を付与しないとコミット時に動いてくれない。

chmod +x .githooks/pre-commit

4. （好み）.gitignore で zip ファイルを除外

zip ファイルは commit したくないので、除外しておく。

echo "extension.zip" >> .gitignore

実際のコード

Github: google-drive-recent-files

まとめ

Chrome 拡張機能の開発を少し楽にするために、今回は zip ファイルの自動生成を Githook の pre-commit を用いて実施した。

発展系

下記も Githook や github Actions を使うことで自動化ができそう。ただ、拡張機能のアップデートは頻度高くないので、 Githook ぐらいがちょうど良いのかもしれない。

• manifest.json 内のバージョンを Github の tag と同じにする
• Chrome Web Store への アップロード自体を自動化する