Zenn
📝

GCPコンソールを一発で：私が開発したChrome拡張機能「gcp-selector」の紹介

2023/07/14に公開
Chrome拡張
Google Cloud
tech

私が作成したChrome拡張機能、gcp-selectorについて紹介します。

機能

この拡張機能の使い方：

  1. 拡張機能を開く
  2. GCPプロジェクトを選択する
  3. GCPサービスを選択する
  4. GCPコンソールが自動的に開く

改善ポイント

この拡張機能は、GCPのコンソール画面を開く際の面倒な手順を解消します：

  1. GCPコンソールを開く
  2. プロジェクトを選択
    a. ページが完全に読み込まれるまで選択することができない
    b. 業務でGCPを使用していると、複数のプロジェクトがあり選択が面倒くさい
  3. 左のタブからサービスを探す
    a. たまにしか開かないCloud Armorなどのサービスは検索して探さなければならず面倒

特に、同じサービスを開いてdev, qa, prodなどで作業をするとき、これらの手順を繰り返すことが苦痛でした。

ユニークな特徴

自動補完

プロジェクトやサービスを素早く検索できるように、自動補完機能を導入しました。Chrome拡張機能を極力シンプルに保つため、自動補完機能にはAutoCompleteJSを採用しました。その理由は次の通りです：

  • ライブラリの依存関係がない
  • 軽量で高速
  • 簡単に導入できる
  • マッチした文字列をハイライト表示可能

autofocus

ユーザーがキーボードから手を離さずに操作できるよう、autofocus機能に注力しました：

  • ポップアップを開くと、プロジェクトの入力フォームにautofocusが設定されています。
  • プロジェクトの入力が完了すると、サービスの入力フォームにautofocusが移動します。
  • サービスの入力が完了すると、自動でコンソール画面が開きます。

参考資料

Discussion