PlasmoでChatGPTの質問回数を制限、可視化する拡張機能を作ってみた！

はじめに

本格的なプログラミングを始めて、半年くらいが経った時に、自己分析する機会があり振り返ってみると、自分がプログラミングを始めた時期は生成系AIの話題で盛り上がり、当たり前のように生成系AIがある状況でした。そのため生成系AIに頼めばドキュメントを見ずともそれなりの物が作れてしまい、生成系AI依存に陥り本質的な理解から遠のいているように感じました。
現状自分は理解に時間をかけ、自分の力解決する力を身に付けないと自力のあるエンジニアの方達との差は広まっていく一方な気がして、iphoneのスクリーンタイムのように制限を行う機能を拡張機能で作成することにしました。

作ったもの

Plasmoを用いてChatGPT内のDOMを監視し質問回数を制限、可視化する拡張機能を作りました。
基本的には質問回数を用いて制限をかけ、イージー、ノーマル、ハード、カスタムの４種類の制限の設定を選択できます。（難易度の設定は少し適当です。）カスタムで何も制限をかけなければ、質問回数をカウントする機能だけを使うことができます。

Plasmoとは

公式サイトでは「ブラウザ拡張機能のNext.jsのようなものだ！」言われています。
正直Reactを使ったことがある人は簡単にPlasmoで拡張機能を作成できると思います。
Plasmoについてはめちゃくちゃわかりやすく書いてある記事があったのでそちらを紹介しておきます。

その他自分が参考にしたモノ

Plasmoの公式Sample GitHub

Plasmoの記事が少なく、正直とても助かりました。

Chrome APIの公式ドキュメント

自分が行いたい実装を考えている時にこのドキュメントを見ることでより具体的な実装を考えることができました。

拡張機能を作っていた時に困ったこと

自分が拡張機能を作っている際に困ったことを記事にしたので、もし気になった物があれば参考にしてください。

毎日同じ時間に起動するアラームをセットする