JS Reveal — 動的DOM可視化ツール

About

JS Reveal は、JavaScript が DOMContentLoaded（DCL）後に追加した DOM 要素を、追加タイミング別に4色で可視化する SEO / AIO 分析ツールです。

Googlebot、ChatGPT、Perplexity、Google AI Overview などの検索エンジン / AI 検索は、JavaScript の実行完了を待たずに第1段階クロールを行うことがあります。その結果、クライアント側レンダリングで表示されている重要コンテンツ（商品情報、FAQ、レビュー、価格、構造化データ等）が検索結果や AI 回答に反映されないケースが頻発しています。

JS Reveal を使えば、こうした「検索エンジンから見えないコンテンツ」を一目で特定でき、SEO 監査・AIO 対応・SSR 導入の優先度判断を劇的に効率化できます。


━━━━━━━━━━━━━━━━━━━━━━
◆ 主な機能
━━━━━━━━━━━━━━━━━━━━━━

■ タイミング別4色ハイライト
JS が追加した要素を、追加タイミングに応じて4色で色分け表示。
  🟡 黄（DCL〜1秒）: Googlebot が拾える可能性あり
  🟠 橙（1〜3秒）: インデックス遅延リスク
  🔴 赤（3秒以降）: Googlebot が見落とすリスク大
  🟣 桃（SEO致命的）: H1〜H3 が JS 追加 → ランキング致命傷

■ Bot視点モード（Alt+B）
JS 追加要素を visibility:hidden で非表示にし、Googlebot が第1段階で見ている世界を再現。SSR の欠損が即座に判明します。

■ SEO診断（自動）
以下の項目を自動検出:
  ・H1 タグが JS 追加 / 存在しない
  ・canonical リンクが JS 追加
  ・FAQPage JSON-LD が JS レンダリング（AI 引用不可）
  ・Product JSON-LD の aggregateRating / price が null
  ・FAQ セクションが JS レンダリング

■ JS依存率の定量化
ページ全体の可視テキストに対する JS 追加分の割合（0〜100%）を表示。閾値による色分け:
  ・緑（<20%）: 安全。概ね SSR 済み
  ・橙（20-49%）: 警戒。一部コンテンツが Googlebot の第1段階で欠落する可能性
  ・赤（≥50%）: 重大。大半のコンテンツが見えない可能性

■ インスペクトモード
ハイライト要素にホバーすると、以下の情報が表示されます:
  ・タグ名と追加タイミング（DCL からの経過ミリ秒）
  ・追加元スクリプトの URL（ライブラリ経由 / アプリコード判別）
原因となった JS ファイルを即座に特定できます。

■ フルページスクリーンショット
スクロール+合成方式でページ全体を 1 枚の PNG として保存。固定ヘッダーは冒頭に 1 回だけ写る設計。クライアント報告書にそのまま貼り付けられます。

■ Markdownレポート自動生成
JS依存率・タイミング別内訳・SEO診断・タグ別集計を含む診断サマリーを、ワンクリックでクリップボードにコピー。GitHub Issue、JIRA、チャットにそのまま貼り付け可能。

■ 診断履歴
直近 20 件の診断結果をローカルに保存。カードをクリックして再訪問できます。

■ キーボードショートカット
  Alt+H: ハイライト ON/OFF
  Alt+B: Bot視点モード ON/OFF


━━━━━━━━━━━━━━━━━━━━━━
◆ こんな方におすすめ
━━━━━━━━━━━━━━━━━━━━━━

・SEO コンサルタント / 内製 SEO 担当者
・AI 検索（AIO）対応に取り組むマーケター
・SPA / React / Vue / Nuxt / Next.js のサイト運用担当者
・SSR / ハイドレーション境界の検証を行うフロントエンドエンジニア
・ヘッドレス CMS 導入プロジェクトのテクニカルリード
・クライアントへの SEO 提案資料を作成する Web 制作会社


━━━━━━━━━━━━━━━━━━━━━━
◆ プライバシー
━━━━━━━━━━━━━━━━━━━━━━

本拡張機能は、一切の個人情報・利用状況情報・コンテンツデータを外部に送信しません。すべての設定と診断履歴は、ユーザーのブラウザ内の chrome.storage.local にローカル保存されます。第三者ライブラリ・トラッキングコードも一切含みません。

詳細: [プライバシーポリシーの URL をここに記載]


━━━━━━━━━━━━━━━━━━━━━━
◆ 技術的特徴
━━━━━━━━━━━━━━━━━━━━━━

■ MAIN world でのパッチ
MutationObserver では非同期マイクロタスク化により失われてしまう「追加元スクリプトの URL」を、Element.prototype を MAIN world で同期的にラップすることで確実に捕捉します。

■ 4色タイミング分類
document_start で MutationObserver を起動し、各要素の追加タイミングを performance.now() で正確に記録。DCL からの相対時間で3段階に分類します。

■ 構造的に正しい JS依存率
分子と分母の両方で同じ「可視リーフ要素の innerText 合計」を使用。jsChars ≤ totalChars が数学的に保証され、100% を超える異常値は発生しません。


━━━━━━━━━━━━━━━━━━━━━━
◆ 対応ブラウザ
━━━━━━━━━━━━━━━━━━━━━━

Google Chrome 116 以降（Manifest V3 対応版）
Microsoft Edge (Chromium 版、Chrome 拡張互換)
Brave、Arc、Opera など Chromium 系ブラウザ


━━━━━━━━━━━━━━━━━━━━━━
◆ ライセンス
━━━━━━━━━━━━━━━━━━━━━━

MIT License（オープンソース）