はじめに

こんにちは、虎の穴ラボのRHです。

虎の穴ラボが開発に携わるクリエイター支援プラットフォーム Fantia では、インフラとしてGoogleCloudPlatform(以下、GCP)を利用しています。

運用フローの中で一部、管理画面を通した操作が必要になる場面があり、注意を配らなくてはならない時があります。

GCPはとても綺麗なUIで構築されていてスッキリしているのですが、その反面、緊張が緩んでしまう側面もあります。

この様な管理画面な為、「開発環境プロジェクトを開いているつもりが……」など、うっかりミスが何度か心配されてきていました。

また、BigQueryの管理画面は開発環境プロジェクトを開いている状態でも、権限さえあれば本番のデータセットの操作が行えてしまいます。

気の緩みは重大な事件に繋がりかねないため、なにか簡単に改善出来ることは無いかと考えたところ、Chromeの拡張機能を作れば手軽に改善できるのではないかと思いつきました。

★ Chrome拡張に関して、以前にとらラボブログでも紹介しておりますので、ぜひ参考にしてください。

toranoana-lab.hatenablog.com

今回作る内容

今回のポイントは以下の3つになります。

本番プロジェクトを選択している状態を分かりやすくする
開発用プロジェクトを開いている時に、BigQueryで本番のデータセットを選択している状態を分かりやすくする
シングルページアプリケーションでのDOM変更を監視する

ファイル構成も最小限で構築しています。

fantia-safe-gcp
  |--main.js
  `--manifest.json

matches はGCPのコンソール画面のみが対象となるようにします。

{
  "name": "fantia-safe-gcp",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "GCPを安全意識を高めるための拡張",
  "content_scripts": [{
    "matches": [
      "https://console.cloud.google.com/*"
    ],
    "js": [
      "main.js"
    ]
  }]
}

画面移動の検知

GCPはシングルページアプリケーションで作られており、画面のローディングが発生しないため、DOMの状態変化を追う必要があります。

今回の内容では、URLのパラメーターを追っていけば要件を満たすことが出来そうなため、こちらを追っていこうと思います。

DOMの変化を検知する上で便利な MutationObserver というインターフェースが WebAPIに定義されています。

developer.mozilla.org

まず初めに、画面の読み込みに合わせて以下の処理をします。

window.addEventListener("load", function () {
  let beforeHref = document.location.href;

  const URLobserver = new MutationObserver(() => {
    if(beforeHref !== document.location.href){
      // 変更が確認されたら過去のURLを更新する
      beforeHref = document.location.href;
    }
  });

  URLobserver.observe(document, {childList: true, subtree: true});

}, false);

現在のURLを取得しておき、document.location.href の変更が検知されるたびに更新しておくことで、これを繰り返しながらURLの変化に対応していきます。

また、 document.location.href でURLを取得したい為、MutationObserverには location を持つ document 本体を渡します。

GCPの画面をわかりやすく変更する

アプリケーションの管理画面でもよくある事例かと思いますが、本番環境では警告色に変更するといった形がベターかと思いますので、一番目立つ位置にあるヘッダーの色を変更していきます。

const updatePlatformBarColor = () => {
  const platformBar = document.querySelector('.cfc-platform-bar-blue');
  const params = new URLSearchParams(document.location.search);
  const project = params.get('project');
  const p = params.get('p');

  if (project === 'production' || p === 'production') {
    platformBar.style.backgroundColor = 'red';
  } else if (project === 'development' || p === 'development') {
    platformBar.style.backgroundColor = 'green';
  }
}

GCPの管理画面のヘッダーバナーの色は .cfc-platform-bar-blue クラスがあたっているようなので、セレクタを頼りに要素を取得します。

URLからパラメーターを取得し、更に project と p の値を利用します。

p は BigQuery管理画面でデータセット選択時に、そのデータセットを所有するプロジェクトのパラメーターになっているので一緒に取得しておき、判定条件として利用します。

条件を満たしていたら、それぞれ red や green の背景色を設定するだけの簡単な処理を行います。

最後に、追加した処理を初回とURL変更時に実行するようにして完成となります。

const URLobserver = new MutationObserver(() => {
    if(beforeHref !== document.location.href){
      // 追加
      updatePlatformBarColor();
      beforeHref = document.location.href;
    }
  });


  // 追加
  updatePlatformBarColor();
  URLobserver.observe(document, {childList: true, subtree: true});