基本的な使い方

ポップアップの高さは 600px 固定で、メインコンテンツは技術リストです。上部に現在のページ情報とフィルターコントロール、下部に検索・生の手がかりなどの補助ツールが配置されています。

上部ツールバー

[StackPrism  現在のページ URL]    [テーマ] [設定] [コピー] [更新]

• 左側：拡張機能名とバージョン番号と現在のページ URL（省略表示、ホバーで全表示）
• 右側の 4 つのアイコンボタン：
  • テーマ（太陽 / 月 / 画面アイコン）：クリックで「自動 / ライト / ダーク」の 3 状態を順番に切り替え
  • 設定：設定ページを開く（独立したタブ）
  • コピー：現在のページ URL をクリップボードにコピー
  • 更新：バックグラウンドに現在のページの再検出を通知する。既存のキャッシュ結果はポップアップにそのまま残る

概要データ

22 技術    274 リソース    0 レスポンスヘッダー

• 技術：検出された重複排除後の技術の総数
• リソース：現在のページで読み込まれたスクリプト / スタイル / iframe / 画像などのリソース URL 数
• レスポンスヘッダー：メインドキュメントのレスポンスヘッダーから抽出された有用なヘッダー数

カテゴリーフィルターバー

[ 重要 5  すべて 22 ]    [ カテゴリーを選択 ▾ ]

• 左側はセグメント切り替え。「重要」は高信頼度の結果のみ、「すべて」はすべてを表示
• 右側はカテゴリードロップダウン。24 カテゴリー（フロントエンドフレームワーク / UI フレームワーク / CDN / WAF / CMS / ...）があり、特定のカテゴリーを選択するとそのカテゴリーの結果のみ表示される。各オプションには件数が付く（例：「CMS · 4」）

技術リスト

各技術 1 枚のカード：

React                                         [高信頼度]
- DOM ノードに React Fiber マーカーが存在する
- リソース URL が cdn.example.com/react.production.min.js にマッチ
ソース：レスポンスヘッダー  動的監視
検出が不正確な場合はここをクリックして修正

• 技術名：クリック可能。その技術の公式サイトまたはリポジトリに移動する（ホバー時に右側に外部リンクアイコンが表示）
• 信頼度バッジ：高（緑）/ 中（黄）/ 低（グレー）
• 証拠：最大 4 行。拡張機能がこの判断を下した根拠となる DOM / リソース / レスポンスヘッダーのスニペット
• ソース：各タグはクリック可能。クリックすると底部にドロワーが開き、その技術・そのソースに対応する生の JSON データのみが表示される
• 修正ボタン：クリックすると GitHub Issue フォームが開き、この検出結果が自動で入力される。誤検知 / 未検出のフィードバックが簡単にできる

TIP

ページから多くのコンテンツが検出された場合は、まず「重要」ビューを確認することをおすすめします。高信頼度の結果のみが表示されます。誤検知を調査したり完全な技術スタックを確認したりするときは「すべて」に切り替えてください。

下部ツールバー

[検索]  [生の手がかり]  [すべてコピー]                      GitHub

左側のツールボタンの詳細は 補助ツール を参照してください。検索と生の手がかりは底部からパネルを開きます。同じボタンまたはパネル内の閉じるボタンを再度クリックすると閉じます。「すべてコピー」は完全な技術スタックレポートをクリップボードに直接書き込みます。

スクロール動作

ポップアップ全体の高さは 600px に固定されており、技術リストエリアのみがスクロールします。上部ツールバー・概要・カテゴリーフィルターバーは常に表示されます。

リストを約 240px 以上下にスクロールすると、右下に円形ボタン（上矢印）が浮かび上がります。クリックするとスムーズにトップに戻ります。