さらば、全ての "ダッシュボード" - AWSのChrome拡張を作った話
はじめに
AWSのマネージメントコンソール上で動作する、Chrome拡張を作成しました。
この拡張機能によりマネージメントコンソールのタブタイトルの表記がよりシンプルなものにすることができます。
この記事は、そのChrome拡張についての紹介を兼ねた、簡単な解説記事です。
主要な機能
早速ですがこのChrome拡張の目的は、AWSのマネージメントコンソールを開いたときのChromeのタブタイトルの視認性を向上させ、複数タブを行き来する操作を効率化するというものです。
例えば、EC２のページを開いた時、デフォルトのマネージメントコンソールの表記だと
- ダッシュボード | EC2 Management Console
となりますが、本Chrome拡張を使用すると
- EC2
となります。さらば、全ての"ダッシュボード"という感じです。
特に大量のタブを開いて操作しているとほとんどファビコンしか見えず、何のサービスの画面か分かりづらい時があります。（そもそもそんなChromeの使い方は推奨されないかもしれませんが...） そういった時に便利なChrome拡張です。
また、ファビコンもデフォルトの設定から、各マネージドサービスのアイコンカラーに変更できます。
例えば、セキュリティ関係のサービスは赤、コンピュートはオレンジ、データベースは青、といった具合です。
実は当初は各マネージドサービスのアイコンを検討・実装していました。調べてみると実際にそういったChrome拡張もあるようです。しかし、そもそも大きくはないスペースに認知的な負荷のかかるマークを配置するよりも、単に色がわかればそれで十分に区別できると思うようになりました。
完全に好みの問題ですが、このChrome拡張では 「シンプルにする」 をコンセプトにしています。
付随的な機能
他にもいくつか機能があります。
- 東京リージョンではない場合に、絵文字「💡」をタブタイトルに表示させることができます
- Security Hub FSBPのコードをタブタイトルに表示させることができます （リロード時のみ）
- popupを開いた際、公式ドキュメント上で対象のマネージドサービスを検索するボタンが出ます
人によって、または使い方によって便利かどうかは変わってくると思いますが、個人的にはどれも使っています。
仕組み
ここまで読んで勘づかれている方もいるかもしれませんが、仕組みとしてはマネージメントコンソールのURIをパースし対応した表記を辞書から取り出しているだけで、難しいことは何もやっていません。
唯一試行錯誤したのは更新タイミングです。Chrome拡張は、基本的にはページが読み込まれたタイミングでしか実行されず、そのタイミングも以下の3パターンから選択する必要があります。
- document_start
- document_end
- document_idle
そのため若干の工夫が必要で、この部分については上記の制約があるものの、まだ改修の余地があるところです。具体的にはaddEventListenerを使っているのですが、イベントの種類によってはChrome拡張上では想定した挙動にならない場合もありました。今後、時間のある時に改良できればと考えています。
ところで、「シンプルにする」というコンセプトで作ったという話を書きましたが、もう一つポイントがあります。それは 画面内の表記やレイアウトに影響を与えない という点です。このChrome拡張ではURIの情報のみを読み取ってタブタイトルとファビコンを変更しており、それに付随した機能がありますが、ページ内の要素には触れていないです。万が一誤認や誤操作の原因とることを防ぐためで、今後機能を追加する場合でも変更しない方針です。
また、一義的には従来のタブタイトルが優先されるべきシーンはあると思っていて、あくまで複数タブを開くユーザー向けの機能拡張、という位置づけです。本来であればすべてのAWSサービスに対応できていると良いのですが、そうではないため、非対応の場合には本来の表記がタブタイトルに表示されます。ファビコンも更新されません。
おまけ：Chrome拡張のセキュリティについて思うこと
Chrome拡張のセキュリティに関して警鐘を鳴らす記事や検証記事は多くあり、manifest v3と呼ばれる新規格になった現在も、悪意を持った開発者であれば様々なことができてしまうようです。
そのため、あまり使われていない/ユーザー数の少ないChrome拡張、個人が開発しているChrome拡張（まさにこの拡張のことですね）はちょっと躊躇うという方もいると思います。非常に同意です。
OSSとしてコードが公開されていれば安心かと言うと多分そうでもなく、GitHubの該当のコードが使用されていることをChrome Web Store上で保証する仕組みは難しいのではないかなと思っています。
では、セキュリティを重視したい環境では、どうするのが良いかと言うと
- コードをcloneして手元で挙動を確認し、デベロッパーモードを有効にしてローカルのファイルを読み込む
- （極論ですが...） 欲しいChrome拡張の機能を自作する
が良いように思います。
自分で作るというのは、未経験の方からするとハードルが高そうに見えますが、自分のようなエンジニアでもいくつか作れたので、一般的なWebエンジニアの方からするとそんなことは無いと思います。とは言え、ちゃんとしたコードを書くのは時間がかかり、この拡張機能のコードもひどいリファクタリングが必要なため、現時点ではまだ未公開です。
一方で、開発者としてできる対策もあまりないと思うのですが、アカウントにはMFAをかけています。実は最近のWeb StoreはMFAがかかっていないとファイルをアップロードできない仕組みのようです。
また、Googleアカウント自体に問題が発生した際に有人サポートを得るため、Google Workspaceの有料アカウントを使用しています。（これは昔ログイントラブルで、辛い思いをしたことがあったからです...）
ちなみにGoogle Workspaceでは、Chrome拡張の使用を制限し、統制する機能があります。そのためエンタープライズな環境だと許可された拡張以外は使用できないという組織もあり、その場合には上記の方法でも承認を得ることは難しいかもしれません。
おわりに
JSの勉強も兼ねて作り始めたChrome拡張だったのですが、社内では思ったより使っていただけているようなので、公開設定にしました。
良ければ是非試してみて下さい。
そしてフィードバックを頂けると大変有り難いです。
Discussion