⏩

ChatGPT で長い出力もワンクリックで出力できる Chrome 拡張を作った

2023/05/20に公開

Chrome拡張

ChatGPT AutoContinuer

ChatGPT で長い出力もワンクリックで出力できる Chrome 拡張を作りました。それがこの ChatGPT AutoContinuer です。

解決したかったこと

先日、ChatGPT Plugins のサービス開始とともに、画面にも少し変化がありました。
以前は長い出力は途中で止まってしまい、「続きをお願いします」のようなプロンプトを入力する必要がありました。
2023/05/20 現在では出力の途中で止まってしまった場合、 Continue generating というボタンが表示されるようになっています。

このボタンをクリックすると、「続きをお願いします」を入力しなくても、同じブロック内で続きを出力してくれます。

以前に比べると非常に便利になりましたが、全て出力するには、

プロンプト送信
↓
出力を待つ
↓
Continue generating をクリック
↓
出力を待つ
↓
Continue generating をクリック
↓
...

を繰り返さなくてはいけません。

GPT4 の長い出力を待っている間に席を外すということができないのが少し面倒でした。

解決方法

そこで、ChatGPT AutoContinuer を作成しました。この Chrome 拡張は、Continue generating ボタンが出現した瞬間に自動的にクリックしてくれるという極単純なものです。
これをインストールすることで、長い出力であっても途中のクリックが不要になります。

実装

ソースコードはほぼ下記だけです。

// DOM が更新される度に実行される関数を定義
const observer = new MutationObserver(() => {
  // 全ボタンを取得
  const buttons = Array.from(document.querySelectorAll('button'));

  // Continue generating を含むボタンを絞り込む
  const buttonsWithText = buttons.filter(function(button) {
    return button.textContent.includes('Continue generating');
  });
  
  // あればクリックする
  if (buttonsWithText.length > 0) {
    buttonsWithText[0].click();
  }

  // Continue generating をクリックしたときにタイミングによってはエラーになる。
  //その時は緑の Regenerate ボタンをクリックすると出力が再開される。
  const regenerateButton = buttons.filter(function(button) {
    return button.classList.contains('btn-primary') && button.textContent.includes('Regenerate response');
  })

  if (regenerateButton.length > 0) {
    regenerateButton[0].click();
  }
});

observer.observe(document.body, { childList: true, subtree: true });

下記で全て公開しています。

おわりに

非常に簡単な Chrome 拡張で ChatGPT での長い出力をワンクリックで出力できるようになりました。

過去に Youtube の広告スキップボタンを自動でクリックする Chrome 拡張を作ったことがあり、それをもとにすぐに作ることができました。

Chrome 拡張の作り方に関しては、下記にまとめたので、興味がある方はどうぞ。

簡単なのでみなさんも是非やってみてください！

ChatGPT AutoContinuer

解決したかったこと

解決方法

実装

おわりに

Discussion