本記事は「MIXI DEVELOPERS Advent Calendar 2025」の10日目の記事です。
AWS IAM Identity Centerの権限セットやIAMユーザーを複数切り替えながらAWSのマネジメントコンソールを使っていて、今どの権限セットやIAMユーザーでログインしているのだろうと思った経験はないでしょうか。
これを一目で判別できるようにするブラウザ拡張機能を開発しました。
ブラウザ拡張機能
- Chrome: https://chromewebstore.google.com/detail/aws-management-console-co/ihllnndjleheembkonidbocncnnedhcf
- Firefox: https://addons.mozilla.org/ja/firefox/addon/aws-console-colorize/
リポジトリ
機能
-
ログインしている権限セットやIAMユーザーに応じてAWSマネジメントコンソールのヘッダーとフッターに色を付ける
-
権限セットやIAMユーザーの選択画面で各権限セットやIAMユーザーの欄に色のブロックを追加する
技術
パッケージマネージャー
Bunを使用しています。
高速で動作して良い感じでした。この辺りはPythonでいうところのuvのような感じですね。
フロントエンドのフレームワーク
拡張機能のポップアップやオプションページはReactで描画しています。定番ですね。
一方、マネジメントコンソールの操作は直接DOMを操作する形で行っています。
また、E2EテストではPlaywrightを使っています。
Playwrightはテキストやラベル、プレースホルダーといったユーザーがソースコードを見ずともわかる要素でタグを指定するのが基本なので、E2Eテストを書く中でその辺の要素をきちんと整備しないといけないという意識が芽生えて良いですね。
ブラウザ拡張機能のフレームワーク
WXTを使用しています。
この拡張機能はChromeとFirefoxの2つのブラウザ向けに提供していますが、それらは1つのコードから生成されています。これを可能にしているのがWXTです。
素の manifest.json やコードを書くよりわかりやすいと感じました。
最後に
もしよければぜひ使ってみてください。
また、機能要望やバグ報告などあれば、GitHubのIssueまでお願いします。
Discussion