shinaps
こちらからインストールすることができます。
みなさんChatGPT使ってますか？
僕は仕事もプライベートもChatGPTがなければ生きていけない体になってしまいました。
これは冗談ではなく、一度ChatGPTでコードを生成し始めると、レートリミットが来たときに
「自分で書こう」とはならずに「レートリミット解除するまで休憩しよ」となってしまうのです。
これは大変なことですね。
ところで、ChatGPTがリリースされてからずっと使っていますが、不満というものも出てきます。
もっと一回のやり取りのトークン数を増やしてほしいとかもそうなのですが、
横幅狭くね！？
コードが全て表示できないというのが地味にストレスで、それに対処している拡張機能がなかったので、Chromeの拡張機能なんて作ったことはなかったのですが、
ChatGPTあるし作れるやろ
というノリで作ってみました。
「ChatGPTのサイドバーとチャット欄の横幅を変更できるChrome拡張機能を作って下さい」
と言ってもいい感じに作ってくれなかったのでどう実現するかを考えるのは完全に自力だったのですが、コードはほとんどChatGPTに書いてもらいました。
こちらにコードを置いてあるので、みたら分かるんですが、ざっくりと説明だけしようと思います。
まず、ChatGPTの構造的に、サイドバーの目印となるclassやidが指定されていないので、何かしらの情報を使ってサイドバーの横幅を変更できそうな要素を取得してくる必要があります。
加えて、ChatGPTではTailwind CSSが使用されており、横幅の指定にはw-hogeのようなclassを使用しています。
そして、サイドバーではw-[260px]というclassが付与されているため、そのclassを持っている要素に対して目印となるidを付与します。
その後、画面の右上に表示されているバーが動かされたときに、そのバーの数値と連動して目印となるidを付与した要素のwidthを変更する処理を行なっています。
ただし、新しい要素が作成されるとページ全体が再レンダリングされてしまい、目印となるidが外れてしまうため、MutationObserverを使用してbodyタグの中身が変更されたときにidを付与し直す処理を行なっています。
チャット欄については、text-baseというclassがついているので、それを目印として、サイドバーと同じように、画面の右上に表示されているバーと連動してtext-baseのwidthを変更するだけです。
こうして、このような感じでサイドバーとチャット欄の横幅を変更できる拡張機能を作ることができました。