以前、ChatGPTの回答が終わったタイミングで通知音を鳴らし、バックグラウンドで回答が完了したタブのfaviconを緑色のチェックマークへ変えるTampermonkeyスクリプトを作った。
前回の記事で作ったのは、
音＝どこかのChatGPTが回答完了した
緑の✓＝このタブの回答が完了して、まだ自分が確認していない
という仕組みだ。
前回の記事はこちら。
これだけでも、ChatGPTを複数タブで並行して使うときの、
「どの回答が終わった？」
という問題はかなり解消できた。
ところが、実際にしばらく使っていると、またひとつ小さな不便が見えてきた。
「では、今どのChatGPTがまだ考えているのか？」
回答が終わったタブは緑色になる。
でも、緑色ではないタブが、
「待機中なのか」
「まだ回答を生成しているのか」
までは分からない。
そこで今回、前回のスクリプトをもう一段階拡張して、
回答生成中のChatGPTをオレンジ色の「…」faviconで表示する
機能を追加した。
これでブラウザのタブを見るだけで、
通常 → 思考中 → 回答完了 → 確認済み
というChatGPTの状態が見えるようになった。
Cursorを見ていて気づいた「処理中も見える」便利さ
普段、AIを使ったWeb制作ではChatGPTとCursorを並行して使うことが多い。
Cursorは、処理中なのか処理が終わっているのかが視覚的に分かりやすい。
複数の処理を並行させていても、
「これはまだ作業中」
「これは終わった」
という状態を把握しやすい。
一方、ChatGPTを複数タブ開いていると、
「このタブはもう終わった？」
「まだ生成していたっけ？」
と、ときどきタブを開いて確認することがあった。
せっかくAIへ作業を任せて別のことを始めても、何度もタブを確認していたら、そのたびに集中が途切れてしまう。
前回のスクリプトで「終わったタブ」は分かるようになった。
だったら次は、
「まだAIが働いているタブ」も見えるようにすればいい。
そこで、回答生成中だけfaviconをオレンジ色の「…」へ変えることにした。
faviconを3つの状態に分けた
今回の完成形はかなりシンプルだ。
通常のChatGPT favicon
→ 待機中、または回答確認済み
オレンジ色の「…」
→ ChatGPTが思考・回答生成中
緑色の「✓」
→ バックグラウンドで回答完了・まだ未確認
という3状態にした。
たとえばChatGPTを5タブ開いていて、
通常 ｜ 🟠 ｜ 🟢 ｜ 🟠 ｜ 通常
となっていれば、わざわざそれぞれのタブを開かなくても状態が分かる。
オレンジは、
AIが仕事中。
緑は、
AIの仕事が終わり、自分の確認待ち。
通常は、
今は処理していない。
実際に使ってみると、この区別は思っていた以上に分かりやすかった。
完了したタブを開けば自動的に元へ戻る
状態表示を作るときに意識したのは、余計な操作を増やさないことだった。
回答生成中にオレンジ色の「…」になったChatGPTタブを開いても、faviconはそのままにしている。
まだChatGPTが処理しているのだから、オレンジでいい。
一方、バックグラウンドで回答が完了して緑色の✓になったタブは、自分がそのタブを開いた時点で通常のfaviconへ戻る。
つまり、
緑の✓＝まだ自分が読んでいない回答
という意味になる。
メールの既読・未読に少し近い。
自分で「確認済み」ボタンを押したりする必要はない。
タブを開いたこと自体を「確認した」と扱う。
個人的には、この仕様がかなり使いやすい。
前回のv1.2.0から何を変えたのか
前回の記事で作ったv1.2.0では、
回答生成
↓
回答完了
↓
通知音
↓
バックグラウンドなら緑の✓
という動作だった。
今回のv1.3.0では、その前にひとつ状態を追加した。
回答生成開始
↓
オレンジの「…」
↓
回答完了
↓
通知音
↓
バックグラウンドなら緑の✓
↓
自分がタブを確認
↓
通常favicon
という流れだ。
つまり今回追加した本質的な機能は、
回答が終わったことだけではなく、現在回答を生成していることもfaviconで見えるようにした
という一点になる。
前回の記事ですでにTampermonkeyスクリプトを入れている場合、新しいユーザースクリプトを追加する必要はない。
現在使っているv1.2.0をv1.3.0へ入れ替えればいい。
v1.3.0への更新方法
前回の記事のスクリプトをすでに使っている場合は、
- Tampermonkeyの管理画面を開く
- 前回作ったChatGPT用スクリプトを開く
- 現在のコードをすべて削除する
- この記事の最後にあるv1.3.0を丸ごと貼り付ける
Ctrl + Sで保存する- 開いているChatGPTタブを再読み込みする
これで更新できる。
初めて導入する場合は、Tampermonkeyで「新規スクリプト」を作成し、最初から入っているコードを削除して、この記事最後の完成版を貼り付ければいい。
Tampermonkeyそのものの導入から確認したい場合は、前回の記事から読む方が分かりやすいと思う。
動作確認はバックグラウンドタブで試す
スクリプトを保存したら、ChatGPTを再読み込みする。
その後、少し長めの回答になりそうな質問をChatGPTへ送信して、すぐに別のタブへ移動する。
正常に動いていれば、回答生成開始とほぼ同時にfaviconが、
オレンジ色の「…」
へ変わる。
ChatGPTが回答している間は、そのままオレンジ。
そして回答が終わると、
緑色の「✓」＋通知音
へ変わる。
そのChatGPTタブを開けば、緑の✓が消えて通常のfaviconへ戻る。
つまり、
思考中 → 回答完了 → 確認済み
という状態がfaviconだけで分かる。
僕の環境では、この流れで問題なく使えている。
なお、ブラウザには音声の自動再生を制限する仕組みがある。
ChatGPTを開いたあとに一度画面をクリックしたり、実際にプロンプトを送信したりしておくと通知音が動作しやすい。
普段普通にChatGPTを使っている分には、あまり意識しなくてもいいと思う。
スクリプトが何を見て「思考中」と判断しているのか
今回のスクリプトでは、ChatGPTが回答生成中かどうかを、画面上に表示される「回答を停止するためのボタン」を使って判定している。
まず、
[data-testid="stop-button"]という要素が存在するか確認する。
見つからない場合には、ボタンのaria-labelや表示テキストも確認して、
stop generatingstop streaming生成を停止回答を停止などに該当するものを探す。
考え方としては単純で、
停止ボタンが表示されている＝ChatGPTが現在回答を生成している
と判断している。
停止ボタンが現れたらオレンジ。
停止ボタンが消えたら、少し待って回答完了と判定する。
一瞬だけボタンが消えた場合に誤検知しないよう、完了判定には少し待ち時間を入れている。
ChatGPT側のUI変更で動かなくなる可能性はある
この仕組みには注意点もある。
今回利用しているHTML要素やdata-testidは、ChatGPTがユーザー向けに動作保証している公開APIではない。
ブラウザに表示されているChatGPTの画面構造を見て判定しているだけだ。
そのため、将来ChatGPT側のUIやHTML構造が変われば、突然動かなくなる可能性はある。
その場合は、
「Tampermonkeyがおかしくなった」
というより、
「ChatGPT側のDOM構造が変わったのではないか」
と考えた方がいい。
基本的には、回答生成中を判定しているisGenerating()周辺を新しい画面構造に合わせて修正すれば対応できる。
僕自身が毎日使っているので、壊れたら自分でも困る。
そのときはまたDevToolsを開いて調べることになると思う（笑）
WebサービスをTampermonkeyでカスタマイズする以上、この程度のメンテナンスは避けにくい。
通知の設定は好みに合わせて変更できる
スクリプト冒頭には、動作を少し変更するための設定値をまとめている。
たとえば、
const ONLY_WHEN_NOT_FOCUSED = false;という設定。
これをtrueへ変更すると、ChatGPTを現在見ている場合には通知音を鳴らさず、別タブを見ているときだけ通知音を鳴らすようになる。
僕はfalseで使っている。
目の前でChatGPTを見ている場合でも、
「ここで回答生成が完全に終わった」
という区切りが音で分かる方が便利だったからだ。
もうひとつ、
const COMPLETE_MARK_ONLY_WHEN_NOT_FOCUSED = true;という設定がある。
これは、
緑色の✓をバックグラウンドで回答完了した場合だけ表示する
という設定だ。
目の前で回答を読んでいるChatGPTが完了しても、その内容はすでに見ている。
わざわざ「未確認」の緑色にする必要はない。
なので僕は、
思考中 → 常にオレンジ
バックグラウンドで完了 → 緑
前面で完了 → 通常
という設定で使っている。
今のところ、この組み合わせが一番分かりやすい。
AIを並列に使うなら「状態が見える」ことも重要
今回追加したのは、faviconを一種類増やしただけだ。
機能としてはかなり小さい。
それでも、複数のChatGPTへ同時に作業を任せる使い方をしていると、かなり便利だった。
以前は、
「どれが終わった？」
「どれがまだ考えている？」
と、ときどきChatGPTのタブを開いて確認していた。
今はブラウザのタブを見るだけで分かる。
AIがどれだけ高速になっても、人間側が何度も処理状況を確認していたら、そのたびに集中が途切れる。
AIへ仕事を渡したあと、
人間が安心してそのAIのことを忘れ、別の仕事へ移れる状態
を作ることも、AIを使う環境としては重要なのだと思う。
前回の改善では、
「どのChatGPTの回答が終わったか」
が見えるようになった。
今回はそこからもう一歩進んで、
「どのChatGPTが今も働いているのか」
まで見えるようになった。
ChatGPTを1タブだけ使う人には、おそらく必要のない機能だ。
でも複数のスレッドへ同時に質問を投げながら作業している人には、小さいけれど実用的な改善だと思う。
完成版スクリプトだけ、今回は有料にしてみる
ここまでで、このスクリプトが何をしているのか、どう設定するのか、どうやってChatGPTの状態を判定しているのか、注意点も含めて一通り書いた。
あとは完成したコードをTampermonkeyへ貼り付ければ動かせる。
これまではスクリプトもそのまま無料公開していた。
正直に言えば、今回のコードも無料で公開してしまって構わないと思っている（笑）
ただ、このブログで使っているTCD PANDORAには有料記事を販売する機能がある。
先日、PANDORAについて記事を書いたときにも、
「まだ肝心の有料記事機能は使っていない」
と書いた。
せっかくなので、今回はその機能を実際に試してみることにした。
記事の考え方や仕組み、導入方法、設定、注意点までは今まで通り無料。
実際に僕が使っている完成版v1.3.0のコードだけを有料部分に置いてみる。
このブログが有料記事を販売するとどうなるのか。
そもそも誰か買うのか。
たぶん売れない気もする（笑）
でも、それも含めて一度試してみたい。
完成版Tampermonkeyスクリプト v1.3.0
ここから先は、僕が実際に使っている完成版スクリプト。
前回のv1.2.0に、
思考・回答生成中＝オレンジ色の「…」favicon
を追加したv1.3.0になる。
購入後は、コードを丸ごとコピーしてTampermonkeyへ貼り付ければ使える。
ログインして記事を購入することで、全文を閲覧できます。
月額100円（税込）、申込時に初回決済、以後1か月ごとに自動更新されます。解約はマイページからいつでも可能で、解約後も支払済み期間の終了までは閲覧できます。日割り返金はありません。 関連記事
© 2026 しゃとん's EYE