WORKS 作ったもの

ChatGPTでEnterを改行、Ctrl+Enterで送信できるようにした【Tampermonkey】

開発AI活用

ChatGPTをPCで使っていて、前々からちょっと気になっていたことがあります。

Enterを押したら送信される。

これです。

短い質問なら別にいいんですが、長めの文章を書いていると、

「ここで改行しよう」

と思ってEnterを押した瞬間に、

送信!!

となることがあります。

もちろんShift+Enterを押せば改行できます。

でも個人的には、

  • Enter → 改行
  • Ctrl+Enter → 送信

の方がしっくりきます。

メールやチャット、各種エディタでもこの操作に慣れているので、ChatGPTも同じようにしたい。

ただ、自分が使っている環境ではChatGPT側にそれを切り替える設定が見当たりませんでした。

ということで、Chrome拡張のTampermonkeyを使って変更してみました。

やりたいこと

今回やりたいのは非常にシンプルです。

  • Enter → 改行
  • Shift+Enter → 従来どおり改行
  • Ctrl+Enter → 送信
  • 日本語変換中のEnter → 変換確定

これだけ。

特に日本語入力中のEnterまで送信扱いになると地獄なので、IME変換中は何もしないようにします。

Tampermonkeyを使う

ChromeにTampermonkeyをインストールして、新しいユーザースクリプトを作ります。

最終的に使ったコードはこんな感じです。

// ==UserScript==
// @name         ChatGPT Enter改行 / Ctrl+Enter送信
// @namespace    chatgpt-enter-control
// @version      4.0
// @description  Enterで改行、Ctrl+Enterで送信
// @match        https://chatgpt.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    document.addEventListener('keydown', function (e) {

        if (e.key !== 'Enter') return;

        // 日本語IME変換中は何もしない
        if (e.isComposing || e.keyCode === 229) return;

        const input = e.target.closest?.('#prompt-textarea');

        if (!input) return;

        // Ctrl + Enter → 送信
        if (
            e.ctrlKey &&
            !e.shiftKey &&
            !e.altKey &&
            !e.metaKey
        ) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            const sendButton =
                document.querySelector('button[data-testid="send-button"]') ||
                document.querySelector('button[aria-label*="送信"]') ||
                document.querySelector('button[aria-label*="Send"]');

            if (sendButton && !sendButton.disabled) {
                sendButton.click();
            }

            return;
        }

        // Shift + EnterはChatGPT本来の処理に任せる
        if (e.shiftKey) {
            return;
        }

        // Alt+Enter、Win+Enterなども触らない
        if (e.altKey || e.metaKey) {
            return;
        }

        // Enter単体
        // ChatGPT側の「Enterで送信」だけ止める
        // preventDefaultはしないので改行自体は行われる
        e.stopPropagation();
        e.stopImmediatePropagation();

    }, true);

})();

保存したらChatGPTを再読み込み。

これで、

Enterを押す

と改行。

そして、

Ctrl+Enter

で送信できるようになりました。

これは快適。

最初はCtrl+Enterが動かなかった

ただし、最初からすんなり動いたわけではありませんでした。

Enterで改行はできるようになったものの、Ctrl+Enterを押しても送信されない。

最初はChatGPTの送信ボタンの取得方法がおかしいのかと思って、コードをいろいろ変更していました。

そこでChromeの開発者ツールを開いて、

document.querySelector('#prompt-textarea')

を実行。

すると、

<div contenteditable="true" id="prompt-textarea">

という感じで、入力欄そのものはちゃんと取得できていました。

じゃあ何がおかしいんだ?

と思って、スクリプトにConsole出力を追加してみます。

ところがCtrl+Enterを押しても、

Consoleに何も表示されない。

つまりChatGPTの処理以前に、

Tampermonkeyのスクリプト自体が実行されていない。

ということでした。

Chrome側で「ユーザースクリプトを許可」が必要だった

Chromeの

chrome://extensions/

を開いて、

Tampermonkey → 詳細

を確認。

そこで**「ユーザースクリプトを許可」**をONにしました。

そのあとChatGPTを再読み込み。

そしてCtrl+Enter。

今度はちゃんと送信されました。

コードが悪いと思って延々修正していましたが、まさかのTampermonkey側でした。

こういうの、開発あるあるな気がします。

Shift+Enterがおかしくなる問題も発生

一応これで完成……

と思ったのですが、もう一つ問題が発生しました。

Shift+Enterの挙動がおかしい。

これまではShift+Enterで普通に改行できていたのに、変更後は改行したはずの部分が半角スペースのような扱いになっていました。

原因はスクリプト。

最初に作ったコードでは、

if (e.key !== 'Enter') return;

のあと、

Ctrl+Enter以外のEnterをまとめて処理していました。

つまり、

Shift+Enterまでスクリプト側で横取りしていた

わけです。

ChatGPTの入力欄は普通のtextareaではなく、contenteditableを使ったエディタになっています。

そのためShift+Enterについてはブラウザ任せにするのではなく、ChatGPT本来のイベント処理をそのまま通した方がよさそうです。

そこで、

if (e.shiftKey) {
    return;
}

を追加。

Shift+Enterには一切手を出さないようにしました。

最終的な操作

これで現在は、

操作動作
Enter改行
Shift+Enter改行
Ctrl+Enter送信
日本語変換中のEnter変換確定

という、自分の理想に近い操作になりました。

特に長文をChatGPTに入力することが多い人には、かなり便利だと思います。

「Enter押しただけで送信するんじゃない!」

と何度も思ったことがあるので、これだけでもだいぶ使いやすくなりました。

Tampermonkeyを入れる必要はありますが、一度設定してしまえば普段は意識する必要もありません。

地味な変更ですが、毎日使うものなのでこういう小さなストレスを消していくのは結構大事。

しばらくこの設定で使ってみようと思います。

コメント

タイトルとURLをコピーしました