Merge pull request #10 from ut-code/feature/sidepanel

初期画面表示を追加、問題文作成　data-check要素追加

Author: MokeMoke13151105

src/sidepanel/App.tsx

@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import './App.css'
 
 type CheckResult = { ok: boolean; details: string }
 
-const CORRECT_ANSWER = "解答記入"
+const CORRECT_ANSWER = "すばらしい。"
 
-
-// 判定ロジックをサイドパネル側に持ってくる
 function checkAnswer(actual: string): CheckResult {
   if (actual === CORRECT_ANSWER) {
     return { ok: true, details: `一致: "${actual}"` }
@@ -19,44 +17,75 @@ function checkAnswer(actual: string): CheckResult {
 function App() {
   const [result, setResult] = useState<CheckResult | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const baselineRef = useRef<string | null>(null)
 
   useEffect(() => {
-    let disconnected = false
-    ;(async () => {
+    let port: chrome.runtime.Port | null = null
+
+    const connect = async () => {
       try {
         const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
         if (!tab?.id) return
-        const port = chrome.tabs.connect(tab.id, { name: 'sidepanel' })
-        
+
+        port = chrome.tabs.connect(tab.id, { name: 'sidepanel' })
+
         port.onMessage.addListener((msg) => {
-          if (disconnected) return
-          
-          // 'UPDATE' ではなく 'DOM_VALUE_UPDATE' を受信する
           if (msg?.type === 'DOM_VALUE_UPDATE') {
-            // 送られてきた 'actual' の値を使って、こちら側で判定する
-            const checkResult = checkAnswer(msg.actual as string)
-            setResult(checkResult)
+            const actual = String(msg.actual ?? '')
+
+            // 初回はベースラインの設定のみ行う
+            if (baselineRef.current === null) {
+              baselineRef.current = actual
+              setResult(null) // 待機画面を維持
+              return
+            }
+
+            // 2回目以降で、かつ値がベースラインから変更された場合のみ判定する
+            if (actual !== baselineRef.current) {
+              setResult(checkAnswer(actual))
+            }
           }
         })
-        
-        return () => {
-          disconnected = true
-          try { port.disconnect() } catch {}
-        }
+
+        port.onDisconnect.addListener(() => {
+          // ページ更新・遷移でリセット
+          baselineRef.current = null
+          port = null
+          setResult(null) // 待機画面に戻す
+        })
       } catch (e: any) {
         setError(e?.message ?? String(e))
       }
-    })()
-  }, []) // CORRECT_ANSWER は定数なので依存配列に追加不要
+    }
+
+    connect()
+
+    // useEffectのクリーンアップ関数
+    return () => {
+      if (port) {
+        try {
+          port.disconnect()
+        } catch {}
+      }
+      baselineRef.current = null
+    }
+  }, [])
 
   return (
     <div className="container">
       {error && <p style={{ color: 'red' }}>Error: {error}</p>}
-      {result
-        ? (<><div>判定: {result.ok ? '正解' : '不正解'}</div><div>詳細: {result.details}</div></>)
-        // 初期状態を「判定中」や「入力待ち」などに変更
-        : (<div>[data-check]要素の入力を待機中…</div>)
-      }
+      {result ? (
+        <>
+          <div>判定: {result.ok ? '正解' : '不正解'}</div>
+          <div>詳細: {result.details}</div>
+        </>
+      ) : (
+        <div>
+          <h2>問題1</h2>
+          <p>レビューの「とにかくひどい。」を「すばらしい。」に書き換えてみよう！</p>
+          <p>ヒント：開発者ツールを使って、レビューに当たる要素を探してみよう。</p>
+        </div>
+      )}
     </div>
   )
 }

vulnerable-web/index.html

@@ -63,7 +63,7 @@ <h2>レビュー</h2>
             <div class="reviewContent">
               <p class="username">Username</p>
               <div id="starIcon1">⭐</div>
-              <p class="reviewText">
+              <p class="reviewText" data-check>
                 とにかくひどい。
               </p>
             </div>