Chatworkの「返信」を"擬似スレッド"化して話題を追いやすくするChrome拡張を作った
Chatworkを日常的に使っていると、同じルーム内でいくつもの話題が並行して進みますよね。
「返信」機能は便利だけれど、会話が増えるほど どの話題が今アクティブなのか、誰がどこまで返しているのか を追うのが少し大変になります。
そこで、Chatwork上の「返信」をベースにして、話題を“擬似スレッド”として一覧化し、ツリーで追えるChrome拡張 Chatwork Reply Tree（Reply Threads for Chatwork） を作りました。
何がうれしいの？（作った理由）
- 返信が絡む話題が増えると、重要な話題が流れやすい
- 「この返信、どれが親で、どこまで続いてる？」を確認したい
これを、"話題の棚卸し"ができるUI にすると、状況把握が一気にラクになるはず。
そんな発想から「返信をスレッドとして一覧化し、クリックで元メッセージへジャンプできる」拡張を作り始めました。
できること
この拡張は、Chatworkのメッセージ（data-mid）を手がかりに、返信関係を拾ってツリーを組み立てます。
その上で、次の体験を提供します。
1) 返信スレッドの一覧化（ポップアップ）
拡張アイコンを押すとポップアップが開き、返信が付いている話題を「スレッド一覧」として表示します。
- スレッドのプレビュー（何の話題か掴みやすい短い要約）
- 投稿者（ざっくり抽出）
- 日時（ざっくり抽出）
- 返信数
- メンションっぽい情報（
To:や@...を軽く抽出してバッジ化）
さらに、ポップアップ内でこのあたりができます。
- 検索（人名/キーワードで絞り込み）
- 並び替え（最新順 / 返信数順 / 古い順）
- 更新（最新状態に再読み込み）
2) ツリー表示（ポップアップ右側）
一覧から話題を選ぶと、右側に 選択したスレッドのツリー を表示します。
カードをクリックすると、Chatwork上の元メッセージへスクロールしてくれるので、行き来がスムーズです。
ツリーの各カードには「もっと見る」も付けていて、必要な時だけ全文（取得できている範囲）を展開できます。
3) ページ上にもツリーを表示（トグル）
「ページにツリー表示」をオンにすると、Chatworkページ右上あたりに 常駐パネル としてツリーを表示できます。
ポップアップを閉じても、ページ上で話題を追えるのが地味に便利です。
4) Chatwork画面から“このスレッドを開く”
Chatworkの各メッセージ付近に 「スレッドで表示」ボタン を追加し、そこから該当スレッドを直接開けるようにしました。
「今見てるこの返信の流れを、ツリーで俯瞰したい」みたいなときにワンクリックでいけます。
使い方
基本の流れはシンプルです。
- Chatwork（
https://www.chatwork.com/）を開く - 拡張機能アイコンをクリック
- ポップアップの「スレッド一覧」から話題を選ぶ
- ツリーのカードをクリックして元メッセージへジャンプ
お好みで、
- 検索で絞り込み
- 並び替えで優先順位付け
- 「ページにツリー表示」で常駐
みたいに使うと、いろんなルームでも “今どの話題が熱いか” を掴みやすくなります。
実装のポイント（軽めに）
Chrome拡張はManifest V3で、構成はざっくりこんな感じです。
- content script（Chatworkページ上でDOMから情報を抽出してツリー化）
- popup（一覧/ツリーのUI。content scriptとメッセージで通信）
- background service worker（「スレッドで表示」からポップアップを開く橋渡し）
DOMの変化に追従する
ChatworkはSPAなので、操作やスクロールでDOMが増えたり入れ替わったりするので、MutationObserver で変化を見て、適度に再構築するようにしました。
"擬似スレッド"を作る考え方
- 各メッセージの
data-midをIDとして扱う - メッセージ要素内に含まれる別の
data-midを拾って「親候補」とみなす - 親を辿ってルートを見つけ、ルート配下をDFSで集めてスレッドとして扱う
こうすると、返信関係をたどりながら、一覧化・ツリー表示・ジャンプがしやすくなります。
UIで気をつけたこと
- 一覧は「プレビュー + 返信数 + 最新っぽさ」で、ぱっと優先度を付けられるように
- ツリーはカードをクリックしたら即ジャンプ（ハイライトで視線誘導）
- 「もっと見る」で、普段はコンパクトに・必要なときだけ展開
- 既存のUIはできるだけ変えない
インストール
おわりに
Chatworkの「返信」を、一覧とツリーで“見える化”するだけでも、話題の把握がかなりスムーズになります。
「ルームが賑やかで追うのが大変」「返信が増えると見落としがち」みたいな場面で、役に立てばうれしいです。
よかったら使ってみてね。フィードバックも大歓迎です！