Merge pull request #13 from ut-code/lv2make

Lv2完成

Author: shirokuma222

src/content.ts

@@ -1,11 +1,22 @@
+// content.tsx
 export {}
 
+// 複数の問題の「現在の値」をまとめて取得する
+function getCurrentValues() {
+  // 問題1: テキストのチェック
+  const el1 = document.querySelector<HTMLElement>('[data-check]')
+  const val1 = el1 ? (el1.textContent ?? '').trim() : ''
 
-// -> 要素の「現在の値」を取得するだけの関数に変更
-function getActualValue(): string {
-  const el = document.querySelector<HTMLElement>('[data-check]')
-  if (!el) return '' // 見つからなければ空文字を返す
-  return (el.textContent ?? '').trim()
+  // 問題2: 画像のsrcチェック
+  // data-check2属性を持つ画像のsrcを取得する
+  const el2 = document.querySelector('[data-check2]') as HTMLImageElement
+  // src属性そのもの(例: "img/star5.png")を取得。絶対パス化されるのを防ぐため getAttribute を推奨
+  const val2 = el2 ? (el2.getAttribute('src') ?? '') : ''
+
+  return {
+    p1: val1,
+    p2: val2,
+  }
 }
 
 // デバウンス
@@ -23,24 +34,22 @@ const ports = new Set<chrome.runtime.Port>()
 chrome.runtime.onConnect.addListener((port) => {
   if (port.name !== 'sidepanel') return
   ports.add(port)
-  
-  // 接続直後に「現在の値」を送る (判定結果ではない)
-  port.postMessage({ type: 'DOM_VALUE_UPDATE', actual: getActualValue() })
-  
+
+  // 接続直後に現在の状態を送る
+  port.postMessage({ type: 'DOM_VALUE_UPDATE', values: getCurrentValues() })
+
   port.onDisconnect.addListener(() => ports.delete(port))
 })
 
-// DevTools等でのDOM変更を監視し、「現在の値」をサイドパネルへ通知
+// DOM変更を監視し、まとめて通知
 const notify = debounce(() => {
-  // 判定(checkAnswer)はしない
-  const actual = getActualValue() 
+  const values = getCurrentValues()
   for (const p of ports) {
-    try { 
-      // 判定結果ではなく、「現在の値」をそのまま送る
-      p.postMessage({ type: 'DOM_VALUE_UPDATE', actual }) 
+    try {
+      p.postMessage({ type: 'DOM_VALUE_UPDATE', values })
     } catch {}
   }
-}, 200) // 200ms ディレイ
+}, 200)
 
 const mo = new MutationObserver(() => notify())
 mo.observe(document.documentElement, {

src/sidepanel/App.tsx

@@ -1,22 +1,34 @@
+// App.tsx
 import { useEffect, useRef, useState } from 'react'
 import './App.css'
 
 type CheckResult = { ok: boolean; details: string }
 
-const CORRECT_ANSWER = "すばらしい。"
-
-function checkAnswer(actual: string): CheckResult {
-  if (actual === CORRECT_ANSWER) {
-    return { ok: true, details: `一致: "${actual}"` }
-  } else {
-    return { ok: false, details: `不一致: あなたの入力="${actual}"` }
-  }
+// 答えの定義
+const ANSWERS = {
+  p1: "すばらしい。",
+  p2: "./images/star5.png"
 }
 
 function App() {
+  // 現在の問題番号 
+  const [step, setStep] = useState(1)
+  // 判定結果
   const [result, setResult] = useState<CheckResult | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const baselineRef = useRef<string | null>(null)
+
+  // イベントリスナー内で最新の step を参照するための Ref
+  const stepRef = useRef(step)
+  // 各ステップの初期値を保持するベースライン
+  const baselineRef = useRef<{ p1: string | null; p2: string | null }>({
+    p1: null,
+    p2: null,
+  })
+
+  // state が変わったら ref も更新しておく
+  useEffect(() => {
+    stepRef.current = step
+  }, [step])
 
   useEffect(() => {
     let port: chrome.runtime.Port | null = null
@@ -30,27 +42,61 @@ function App() {
 
         port.onMessage.addListener((msg) => {
           if (msg?.type === 'DOM_VALUE_UPDATE') {
-            const actual = String(msg.actual ?? '')
+            const { p1, p2 } = msg.values
+            const currentStep = stepRef.current
 
-            // 初回はベースラインの設定のみ行う
-            if (baselineRef.current === null) {
-              baselineRef.current = actual
-              setResult(null) // 待機画面を維持
-              return
+            
+            if (currentStep === 1) {
+              // 初回ロード時の値をベースラインとして記憶
+              if (baselineRef.current.p1 === null) {
+                baselineRef.current.p1 = p1
+                return
+              }
+
+              // ベースラインから変化があった場合のみ判定
+              if (p1 !== baselineRef.current.p1) {
+                const isCorrect = p1 === ANSWERS.p1
+                setResult({
+                  ok: isCorrect,
+                  details: isCorrect ? `一致: "${p1}"` : `不一致: "${p1}"`
+                })
+
+                // 正解なら2秒後に次の問題へ
+                if (isCorrect) {
+                  setTimeout(() => {
+                    setStep(2)
+                    setResult(null)
+                    baselineRef.current.p2 = p2
+                  }, 2000)
+                }
+              }
             }
 
-            // 2回目以降で、かつ値がベースラインから変更された場合のみ判定する
-            if (actual !== baselineRef.current) {
-              setResult(checkAnswer(actual))
+            
+            if (currentStep === 2) {
+              if (baselineRef.current.p2 === null) {
+                baselineRef.current.p2 = p2
+                return
+              }
+
+              if (p2 !== baselineRef.current.p2) {
+                
+                const isCorrect = p2.includes(ANSWERS.p2)
+                setResult({
+                  ok: isCorrect,
+                  details: isCorrect ? `一致: (${p2})` : `不一致: (${p2})`
+                })
+                // ※ここでさらに step3 へ遷移させることも可能
+              }
             }
           }
         })
 
         port.onDisconnect.addListener(() => {
-          // ページ更新・遷移でリセット
-          baselineRef.current = null
+          baselineRef.current = { p1: null, p2: null }
           port = null
-          setResult(null) // 待機画面に戻す
+          setResult(null)
+          setStep(1) // 接続が切れたら最初に戻す
         })
       } catch (e: any) {
         setError(e?.message ?? String(e))
@@ -61,29 +107,45 @@ function App() {
 
     return () => {
       if (port) {
-        try {
-          port.disconnect()
-        } catch {}
+        try { port.disconnect() } catch {}
       }
-      baselineRef.current = null
+      baselineRef.current = { p1: null, p2: null }
     }
   }, [])
 
+  // UI描画
   return (
     <div className="container">
       {error && <p style={{ color: 'red' }}>Error: {error}</p>}
-      {result ? (
-        <>
-          <h2>問題1</h2>
-          <p>レビューの「とにかくひどい。」を「すばらしい。」に書き換えてみよう！</p>
-          <h2>判定: {result.ok ? '正解' : '不正解'}</h2>
-          <div>詳細: {result.details}</div>
-        </>
-      ) : (
+
+      {/* ステップ1の表示 */}
+      {step === 1 && (
         <div>
           <h2>問題1</h2>
           <p>レビューの「とにかくひどい。」を「すばらしい。」に書き換えてみよう！</p>
-          <p>ヒント：開発者ツールを使って、レビューに当たる要素を探してみよう。</p>
+          {result && (
+            <div className={result.ok ? "result-ok" : "result-ng"}>
+              <h3>判定: {result.ok ? '正解！' : '不正解'}</h3>
+              <p>{result.details}</p>
+              {result.ok && <p>次の問題へ進みます...</p>}
+            </div>
+          )}
+          {!result && <p className="hint">ヒント：開発者ツールを使って、レビューに当たる要素を探してみよう。</p>}
+        </div>
+      )}
+
+      {/* ステップ2の表示 */}
+      {step === 2 && (
+        <div>
+          <h2>問題2</h2>
+          <p>星1の画像(star1.png)の <code>src</code> を書き換えて、星5 (star5.png) にしてみよう！</p>
+          {result && (
+            <div className={result.ok ? "result-ok" : "result-ng"}>
+              <h3>判定: {result.ok ? '正解！' : '不正解'}</h3>
+              <p>{result.details}</p>
+            </div>
+          )}
+          {!result && <p className="hint">ヒント：imgタグの src 属性を探そう。</p>}
         </div>
       )}
     </div>

vulnerable-web/images/star1.png

@@ -50,7 +50,7 @@ <h2>レビュー</h2>
             <img src="./images/reviewIcon.png" class="reviewIcon" />
             <div class="reviewContent">
               <p class="username">Username</p>
-              <div id="starIcon1">⭐⭐</div>
+              <div id="starIcon1"><img src="./images/star2.png"></div>
               <p class="reviewText">
                 ワイヤレスには対応しているものの、有線接続用のケーブルを取り外すことができず、非常に邪魔くさい。
                 音質も値段の割には悪い。ノイキャンは効いているかどうかわからないレベルであり、
@@ -62,7 +62,7 @@ <h2>レビュー</h2>
             <img src="./images/reviewIcon.png" class="reviewIcon" />
             <div class="reviewContent">
               <p class="username">Username</p>
-              <div id="starIcon1">⭐</div>
+              <div id="starIcon2"><img src="./images/star1.png" data-check2></div>
               <p class="reviewText" data-check>
                 とにかくひどい。
               </p>

vulnerable-web/images/star2.png

@@ -234,3 +234,8 @@ footer {
 .closeBtn {
   background-color: gray;
 }
+
+#starIcon1 img, #starIcon2 img {
+    width: 100px; /* お好みのサイズに調整してください */
+    height: auto;
+}