Chrome拡張機能の開発を効率化するためのテンプレート・ツールキットです。アイコン生成からパッケージングまで、開発からリリースまでの一貫したワークフローを提供します。
- 画面右上の 「Use this template」 → 「Create a new repository」 をクリック
- リポジトリ名と公開設定を入力して作成
- 作成されたリポジトリをクローンして開発開始
git clone https://github.com/<your-username>/<your-repo-name>.git
cd <your-repo-name>- 以下を編集して開発開始:
-
manifest.jsonのname,descriptionを変更 -
manifest.jsonのmatchesを対象URLに変更 -
manifest.jsonのpermissionsを必要に応じて追加 -
content-script.jsにメインロジックを実装 -
styles.cssにスタイルを実装
-
- アイコン自動生成: 1つの画像から複数サイズのアイコンを自動生成
- パッケージング自動化: Chrome Web Store用のZIPファイルを自動作成
- 画像リサイズツール: スクリーンショット用画像の自動調整
- 日本語ドキュメント: 完全日本語対応のドキュメントとツール
- macOS (推奨)
- Bash シェル
- sips: macOS標準のコマンドラインツール (アイコン生成用)
- ImageMagick: 画像処理ライブラリ
- zip: アーカイブ作成 (標準搭載)
# Homebrewを使用
brew install imagemagick1つの画像から Chrome拡張機能に必要な全サイズのアイコンを自動生成します。
# 基本的な使用方法
./script/generate-icons.sh source-icon.png
# 使用例
./script/generate-icons.sh my-extension-icon.png生成されるアイコン:
icons/icon16.png(16x16px) - 拡張機能のファビコンicons/icon19.png(19x19px) - ツールバーアイコン（旧版対応）icons/icon32.png(32x32px) - Windows等での表示icons/icon38.png(38x38px) - ツールバーアイコン（高解像度）icons/icon48.png(48x48px) - 拡張機能管理ページicons/icon128.png(128x128px) - Chrome Web Store表示
推奨事項:
- 正方形の画像を使用
- 128px以上の高解像度画像を推奨
- PNG形式で入力
拡張機能をChrome Web Storeに公開するためのZIPファイルを作成します。
./script/build-chrome-extension.shパッケージに含まれるファイル:
manifest.json(必須)content-script.js(必須)styles.css(必須)icons/ディレクトリlib/ディレクトリ (存在する場合)
自動除外されるファイル:
.DS_Store.gitkeep- 隠しファイル
Chrome Web Store用のスクリーンショット画像を1280x800サイズに調整します。
# 単一ファイル
./script/resize-to-1280x800.sh screenshot.png
# 複数ファイル
./script/resize-to-1280x800.sh *.jpg *.png
# ディレクトリ内の全画像
./script/resize-to-1280x800.sh screenshot/
# 出力ディレクトリを指定
./script/resize-to-1280x800.sh -o output/ *.jpg
# 確認なしで上書き
./script/resize-to-1280x800.sh -y screenshot.png機能:
- 縦横比を保持してリサイズ
- 透明背景でPNG出力
- 複数ファイルの一括処理
- ディレクトリ指定での自動検出
.
├── README.md # プロジェクト概要
├── .gitignore # Git除外設定
├── manifest.json # Chrome拡張機能設定（編集して使用）
├── content-script.js # コンテンツスクリプト（編集して使用）
├── styles.css # スタイルシート（編集して使用）
├── icons/ # アイコンファイル格納
│ └── .gitkeep
├── screenshot/ # スクリーンショット格納
│ └── .gitkeep
├── lib/ # ライブラリファイル（オプション）
└── script/ # ビルドスクリプト
├── build-chrome-extension.sh
├── generate-icons.sh
└── resize-to-1280x800.sh
# プロジェクトをクローン
git clone <repository-url>
cd develop-chrome-extension
# 必要な依存関係をインストール
brew install imagemagick# 1. manifest.jsonを作成
# 2. content-script.js, styles.cssを実装
# 3. アイコンを生成
./script/generate-icons.sh your-icon.png# Chrome拡張機能として読み込んでテスト
# chrome://extensions/ で「デベロッパーモード」を有効にして読み込み# スクリーンショットを撮影後、サイズ調整
./script/resize-to-1280x800.sh screenshot.png# Chrome Web Store用ZIPファイルを作成
./script/build-chrome-extension.sh- Chrome Web Store Developer Dashboard にアクセス
- 生成されたZIPファイルをアップロード
Q: sips: command not found エラーが出る
A: macOS以外の環境ではsipsコマンドが利用できません。macOS環境で実行してください。
Q: convert: command not found エラーが出る
A: ImageMagickがインストールされていません。brew install imagemagickでインストールしてください。
Q: アイコンが歪んで見える A: 元画像が正方形でない可能性があります。正方形の画像を使用してください。
Q: ZIPファイル作成時にmanifest.json not foundエラー
A: プロジェクトルートにmanifest.jsonファイルが必要です。Chrome拡張機能の設定ファイルを作成してください。
各スクリプトは詳細なログを出力します：
- 🔵
[INFO]: 情報メッセージ - 🟢
[SUCCESS]: 成功メッセージ - 🟡
[WARNING]: 警告メッセージ - 🔴
[ERROR]: エラーメッセージ
{
"manifest_version": 3,
"name": "Your Extension Name",
"version": "1.0.0",
"description": "Your extension description",
"icons": {
"16": "icons/icon16.png",
"19": "icons/icon19.png",
"32": "icons/icon32.png",
"38": "icons/icon38.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_scripts": [
{
"matches": ["https://example.com/*"],
"js": ["content-script.js"],
"css": ["styles.css"]
}
]
}プルリクエストや Issue の報告を歓迎します。
MIT License