Web記事の差分を一発ハイライトするChrome拡張「TabDiff」を作りました

FAQサイトなどのWeb記事を更新する際に、どこが変わったのかをレビューしやすくなるよう、2つのタブの本文（ 領域）だけを比べて差分をハイライトするChrome拡張機能を作りました。

特徴

• 本文だけにフォーカス（<article>の中のみ）し、ノイズを最小化
• HTML比較か、Text比較かを選択可能
• 画像の変更（差し替え・追加・削除）も一覧で把握
• 使い方は2タブ選択 → Compare だけのシンプルUI

使い方

1. 比較したい2つのタブを開く
2. 拡張を起動してタブを選択
3. Compare をクリック → 差分ビューで確認

ユースケース

• 文章のレビュー
  • 要件通り修正できているか
• 画像のレビュー
  • 画像差し替えの漏れがないか

なぜ作ったか

Web記事をレビューする際に、どこがどのように更新されているかが分かりにくく困っていました。
自分だけでなく、他の人も簡単に差分比較ができるように、Chrome拡張機能を開発しました。

実装メモ

アーキテクチャ

TabDiff/
├── manifest.json
├── popup.html
├── popup.js
├── compare.html
├── compare.js
├── style.css
├── libs/
│   ├── diff.min.js
│   └── diff2html.min.js
├── diffWorker.js
└── tabdiff_logo.png

• Popup（popup.html / popup.js）：タブ一覧と比較モード（Text/HTML）を選択
  → 2つのタブを指定してcompare.htmlを開く

• 比較ページ（compare.html / compare.js）：指定タブの 要素からテキスト/画像を取得
  → テキスト差分はdiff.min.js＋diff2html.min.jsで生成、画像差分はsrc集合比較で判定

• スタイル（style.css）：ポップアップUIと差分表示の見た目調整

処理フロー

1. Popupで2つのタブとモードを選び「Compare」
2. 比較ページが各タブにスクリプトを注入し、本文と画像を収集
3. テキスト差分をHTML化して表示、画像差分はサムネイル表示
4. 未検出時はエラー表示

利用ライブラリ

• diff
  • JavaScriptでのテキスト差分生成ライブラリ
  • 本実装ではDiff.createPatchを用い、行単位で差分パッチを生成
• diff2html
  • Git形式の差分パッチを見やすいHTMLに変換するライブラリ
  • 本実装ではDiff2Html.html()を用い、比較結果を見やすい形式で出力

まとめ

TabDiffは、Web記事やFAQページの更新レビューなどの文章や画像の差分確認が必要な場面で、作業効率を大幅に向上できます！
ぜひ Chrome ウェブストアからインストールして試してみてください。