GCP Project Colorizer

GCP コンソールのヘッダー色を プロジェクト ID ごとに自動で切り替える Chrome 拡張機能です。 複数のプロジェクトを頻繁に行き来する際に、現在どのプロジェクトを操作しているのかを視覚的に分かりやすくします。

✨ 主な機能

• プロジェクトIDに応じたヘッダー色の自動変更: プロジェクトごとに好きな色を設定できます。
• SPA（Single Page Application）対応: GCPコンソール内の画面遷移に追従して、色がリセットされるのを防ぎます。
• シンプルな構成: manifest.json と colorize.js の2ファイルのみ。ビルドや外部ライブラリは不要です。
• 柔軟なID検出: 以下の両方のURL形式からプロジェクトIDを自動で抽出します。
  • ?project=my-project-123
  • /projects/my-project-123/

🚀 インストールと設定

インストール

1. このリポジトリを git clone するか、ZIP形式でダウンロードして展開します。
2. Chromeで chrome://extensions を開きます。
3. 右上の 「デベロッパーモード」 をONにします。
4. 「パッケージ化されていない拡張機能を読み込む」 をクリックし、1で展開したフォルダを選択します。

色のカスタマイズ

1. colorize.js ファイルを開き、COLORS オブジェクトを編集します。

2. キーに GCPのプロジェクトID、値に 好きなカラーコード を設定してください。

   // colorize.js
   const COLORS = {
     // 例:
     'my-project-dev':  '#03A9F4', // 開発環境は青
     'my-project-stg':  '#FFC107', // ステージング環境はオレンジ
     'my-project-prod': '#E91E63'  // 本番環境は赤
   };

3. ファイルを保存した後、chrome://extensions ページでこの拡張機能の 更新ボタン（↻） をクリックすると変更が反映されます。

ヒント: プロジェクトIDの一覧は、ローカル環境で gcloud projects list コマンドを実行すると確認できます。

フォルダ構成

gcp-project-colorizer/
├─ manifest.json   # Chrome 拡張マニフェスト
└─ colorize.js     # ヘッダー色を変更する本体スクリプト

ライセンス

MIT