ChatGPTで Vim ライクなキーバインドを使う

背景

Web 版の ChatGPT を Vivaldi でアプリケーション化して使っている。

長らく使っているが、いくつか不便なところがある。

一番気になるのは、送信時に Enter じゃなくて Ctrl+Enter で送信したい。Enter は改行にしたい。

もう一つは、送信後に応答が出力される時や、過去の会話を見返す時に、トラックパッドやマウスを使ってスクロールしないといけないこと。

入力中に見返したい場合などにもキーボードから手が離れて手間になる。テキストボックスにフォーカスを戻すのも手間。思考が途切れる。

やったこと

これを何とかしたくて、Vim ライクなキーバインドの一部を実装した。

Chrome 拡張の Tampermonkey に登録して実行する形式。あれこれ追加実装しようとすると Tampermonkey のエディタで書くのはちょっときついし、拡張にするほどでもないのでほどほどで。

ノーマルモード（テキストエリア以外にフォーカスがある場合）

• j, k, Ctrl+d, Ctrl+u, gg, G : スクロール操作
• i : テキストエリアにフォーカス
• Ctrl+r : リロード

編集モード（テキストエリアにフォーカス中）

• Enter : 改行
• Ctrl+Enter : 送信。送信後はテキストエリアからフォーカスを外す

その他

• F12 : 無視（開発者ツール誤爆防止）

コード

実装は以下の Gist に置いた。Tampermonkey のユーザースクリプトとして実行している。

CSS の調整

あと、どこにフォーカスがあるのか分かりにくいし、音声機能を使わないので、Stylus で以下のスタイルを適用した。

#thread-bottom form {
    border: 2px solid #303030;
    border-radius: 28px;
}
#thread-bottom form:focus-within {
    border: 2px solid #f3f3f3;
    border-radius: 28px;
}

button[aria-label="音声入力ボタン"] {
    display: none;
}

button[aria-label="音声モードを開始する"] {
    display: none;
}

テキストエリアにフォーカスがあるときは明るいボーダーで表示される。

フォーカスアウト時は暗いボーダーになる。使わない音声関連のボタンは非表示にした。

まとめ

これで、ChatGPT での文章入力がかなり快適になった。

特に Ctrl+Enter での送信と Vim ライクなスクロール操作により、キーボードから手を離すことなく操作できるのが良い。