GCP コンソールのヘッダー色をプロジェクトごとに変える最小 Chrome 拡張を 10 分で作ってみた

はじめに

GCP で 複数プロジェクトを行き来していると、
「えっ…いま本番？ それとも検証？」 とヒヤッとする瞬間、ありませんか？
私はあります。

そこで、こちらを参考にしつつ、
「プロジェクトを切り替えたら GCP コンソールのヘッダー色が自動で変わる」
最小構成の Chrome 拡張機能をChatGPTを使って自作してみました。

• 個人利用専用（社内配布や拡張機能の公開はしない想定）
• 最低限 2 ファイルだけ（manifest.json と colorize.js）
• Node.js なし・ビルドなし・コピペで動く

自作したものをGitHubに公開しています。

この記事では、Chrome拡張機能を作ったことが無い私でも、 ゼロから導入完了まで 10 分 で作成できた手順をまとめます。

1. フォルダを用意

適当な作業ディレクトリを作ります。
ここでは例として ~/dev/gcp-colorizer を使います。

mkdir -p ~/dev/gcp-colorizer && cd $_

中身はまだ空で OK です。

2. manifest.json を作成

{
  "manifest_version": 3,
  "name": "GCP Project Colorizer",
  "version": "0.3.0",
  "description": "Change GCP console header color by project ID.",
  "permissions": ["storage"],
  "host_permissions": ["https://console.cloud.google.com/*"],
  "content_scripts": [
    {
      "matches": ["https://console.cloud.google.com/*"],
      "js": ["colorize.js"],
      "run_at": "document_idle"
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none';"
  }
}

3. colorize.js を作成

/* GCP Project Colorizer v0.3 */

(() => {
  // ----- 1) プロジェクト ID を取得 -----
  function getProjectId () {
    const url = new URL(location.href);

    // ?project=my-project-id
    const qp = url.searchParams.get('project');
    if (qp) return qp;

    // ?projectNumber=123456789012
    const qpn = url.searchParams.get('projectNumber');
    if (qpn) return qpn;

    // /projects/my-project-id/
    const m = url.pathname.match(/\/projects\/([^/]+)/);
    return m ? m[1] : null;
  }

  // ----- 2) ID → 色マップ（ここを書き換えるだけ） -----
  const COLORS = {
    'staging-example-123': '#009688',
    'prod-example-456':    '#D32F2F'
  };

  // ----- 3) ヘッダーに色を適用 -----
  function apply () {
    const id = getProjectId();
    if (!id) return false;

    const color = COLORS[id];
    if (!color) return false;

    const bar = document.querySelector(
      'header, div[role="banner"], cfc-app-bar'
    );
    if (bar) {
      bar.style.cssText += `
        background-color:${color} !important;
        --theme-light-primary:${color} !important;
      `;
      return true;
    }
    return false;
  }

  // 初回 + SPA 遷移対応
  function applyWithRetry (retry = 3) {
    if (!apply() && retry) setTimeout(() => applyWithRetry(retry - 1), 200);
  }
  applyWithRetry();

  // URL 変化（pushState）を監視
  let href = location.href;
  new MutationObserver(() => {
    if (href !== location.href) {
      href = location.href;
      setTimeout(applyWithRetry, 120);
    }
  }).observe(document.body, { childList: true, subtree: true });

  // DOM の動的生成を監視
  new MutationObserver(applyWithRetry)
    .observe(document.documentElement, { childList: true, subtree: true });
})();

書き換えるのは COLORS マップ だけです。
ヘッダーの色を変えたいプロジェクトのプロジェクト ID と、変える色の色コードを好きなだけ追加します。

4. Chrome に読み込む

1. アドレスバーに chrome://extensionsと入力し、Chrome拡張機能の画面を開く
2. 右上 「デベロッパーモード」 を ON
3. 「パッケージ化されていない拡張機能を読み込む」
   → ~/dev/gcp-colorizer フォルダを選択
4. GCP コンソールを開き、プロジェクトを切り替える
   → ヘッダーが設定した色に変われば成功

コードを編集したあとは 拡張の「更新」 ↻ ボタン → GCP ページをリロードすると即反映されます。

5. うまく色が付かないときのチェックリスト

チェックポイント	対処
プロジェクト ID が合っているか	gcloud projects list で正式 ID を確認
コンソールにエラーが出ていないか	DevTools → Console で赤字のエラーを確認
キャッシュの問題ではないか	⌘⇧R / Ctrl+F5 でハードリロード
MutationObserver に追随できてるか	colorize.js が v0.3 以降か確認

※上記一通り確認してもうまくいかない場合は、一旦拡張機能を削除してから再度先ほどと同じ手順で修正したプロジェクトを読み込むとうまくいく場合があります。

6. 最後に

一度もChrome拡張機能を作成したことが無く、JavaScriptもほとんど触ったことの無い私でも、上記の手順で無事プロジェクトごとにGCPのヘッダーの色を変えられるようになりました。
既存の拡張機能でも良かったのですが、公式として提供されているものは無かったようで、業務で使用するには不安だったので自分で作成できて良かったです。

GUIで色の編集ができるようにもしたいと思っているので、できたらこのページに追記したいと思います。

参考