Zenn
😺

ChatGPT-4oに聞いたら欲しいChrome拡張が簡単に出来た話

2024/05/17に公開
Chrome拡張
ChatGPT
tech

この記事について

この記事はタイトルの通り、以下のような流れを記録してみようという内容です。

  • AWS IAM Identity Center経由でAWSの環境にログインすると環境名が引っ張れない
    • 引っ張ることは出来てもマウスオーバーして・・・みたいな感じなので視覚的にはあまりうれしくない
  • 過去はChrome拡張のSwitch Role Extensionを使っていたけど、多分使えなさそう
  • じゃあ、ChatGPT-4oも出たし試しにChrome拡張作ってみるか！

事の発端

もともと、私自身はインフラエンジニアでAWSを触っていましたが、ここ数年は使っていませんでした。
AWSを利用していた当時はAWS IAM Identity Centerが無く、Switch Roleを行って各環境へのログインを行っていました。
その際は、AWS Switch Role Extension を愛用させてもらっていました。
このExtensionがあると、Switch Roleがしやすくなることはもちろん、今自分がどの環境にどのロールでログインしているか、などがとても見やすく重宝していました。

ただし、AWS IAM Identity Centerでログインすると、次の画像のようにアカウント名@ドメイン名となってしまい、視認性が悪くなりました。

※ アカウントID等はマスクしてあります。

調べてみても、あんまりChrome拡張なさそうでみんな困ってないのか？と思いましたが・・・無いものは仕方ないのでそのまま運用してました。
が、流石に今自分がどの環境にいるのかをパパっと見えないのはストレスが溜まったので、それなら作ってみようと思った次第です。
もしかしたら、AWS側の設定で何かあったのかもしれませんが、今回は以下のような考えがありChrome拡張を作ってみました。

  • Chrome拡張、ストアで公開してみたい
  • Chrome拡張、書いたことないから作ってみたい
  • OSS活動、してみたい
  • ChatGPT-4oがすごいらしい

書いてる人のスキルセット

  • Chrome拡張、書いたこと無い。JavaScriptでなんかできるらしい、みたいな程度しか知らない
  • TerraformとかAnsibleは触るけど・・・ガッツリプログラムは書かないな・・・
  • 昔JavaとかCはちょっと書いてたので書いてあるコードはなんとなく読めはする・・・気がする・・・

やってみる

成果物

https://github.com/ruchikawa/aws-account-display-customizer

途中経過

おおよそ、以下のような流れで質問

  1. 画像と一緒にプロンプトを渡す
  2. デベロッパーツールで要素を探す
  3. うまく動かないならデバッグの方法を聞く

とりあえずモノを作ってもらう

まずは雑に質問

そうすると、manifest.jsonとcontent.jsが勝手に生成される。

ただし、この状態ではさすがに要素名とかが分からないので、デベロッパーツールを使って要素を渡してあげる。

動かないのでデバッグを要請する

なるほど、手動で関数を実行できるらしい
そしてこんなこともお願いしてみる

そしたら動いたのでなんとなく報告しておく

途中で、DOMがロードされる前にスクリプトが実行されてそうなのでそれも報告しておく
そうすると、勝手に window.onload() を使うようにしてくれた。
実際にはそれでも動かず、それを報告すると MutationObserver を使うように変更してくれた

続ける

アイコンまで作ってくれるのすごい

ありがとうありがとう・・・

審査へ

メールアドレスは公開されてしまうため、ドメインを持っているならCloudflare Email Routing を使うと良さそうです

提出にあたって必要なこと

  • 拡張の説明
  • 画像アセットの提出
    • アイコン
    • Chrome拡張そのものを説明するためのスクショ
  • 用途の説明
  • 権限セットに対する説明

上記を求められましたが、基本ChatGPTに聞けばどうにかなります。

2024/05/17 9時頃にChrome拡張を審査に出したので、これが公開されたタイミングになったら記事を更新します。

おわりに

今まではChrome拡張が無いから運用でどうにかする or 頑張って自分で作る、のどちらかを選択していたかと思いますが
今ではChat-GPTに聞くだけでChrome拡張の作成からストア公開(審査中)まで行えるようになりました。
賞味、5時間程度で出来てしまったので、スキマ時間にやってみるかというにはちょうどいい感じかもしれません。

5/21 追記

無事に公開と相成りました。
初回申請時、要求していたpermissionとして activeTab を書いていましたが、Chromeストアからは「使ってない権限だから消しておくれ」と飛んできたのでその対応をした1日後くらいに申請が受理されました。
https://chromewebstore.google.com/detail/aws-account-display-custo/cefipfddebkjeoenjeadgfcdgmlkefgk?hl=ja&authuser=0

Discussion