Merge pull request #24 from ut-code/feature/updatesidepanel

ページ遷移でミッションが変わらないように＋判定整備

Author: MokeMoke13151105

public/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
-  "name": "My SidePanel Extension",
+  "name": "ブラウザハック入門ミッション",
   "version": "1.0.0",
-  "description": "Chrome extension with side panel (React + Vite + TypeScript)",
+  "description": "ブラウザハック入門のミッション用拡張機能",
   "background": {
     "service_worker": "background.js"
   },
@@ -12,7 +12,7 @@
   "side_panel": {
     "default_path": "src/sidepanel/index.html"
   },
-  "permissions": ["sidePanel", "tabs"],
+  "permissions": ["sidePanel", "tabs", "storage"],
   "host_permissions": ["<all_urls>"],
   "content_scripts": [
     {

src/content.ts

@@ -1,6 +1,8 @@
 // content.tsx
 export {}
 
+const PAGE_KEY = `${location.origin}${location.pathname}`
+
 function isDisplayed(el: Element | null): boolean {
   if (!el) return false
   if (!el.isConnected) return false
@@ -63,7 +65,11 @@ function sendMessage() {
     lastJson = currentJson
     for (const p of ports) {
       try {
-        p.postMessage({ type: 'DOM_VALUE_UPDATE', values })
+        p.postMessage({
+          type: 'DOM_VALUE_UPDATE',
+          pageKey: PAGE_KEY,
+          values,
+        })
       } catch {}
     }
   }
@@ -73,23 +79,26 @@ chrome.runtime.onConnect.addListener((port) => {
   if (port.name !== 'sidepanel') return
   ports.add(port)
 
-  // 接続直後に現在の状態を送る
   const initialValues = getCurrentValues()
   lastJson = JSON.stringify(initialValues)
-  port.postMessage({ type: 'DOM_VALUE_UPDATE', values: initialValues })
+  port.postMessage({
+    type: 'DOM_VALUE_UPDATE',
+    pageKey: PAGE_KEY,
+    values: initialValues,
+  })
 
   port.onDisconnect.addListener(() => ports.delete(port))
 })
 
 // DOM変更を監視し、まとめて通知
 const notify = debounce(sendMessage, 200)
-
 const mo = new MutationObserver(() => notify())
 mo.observe(document.documentElement, {
   childList: true,
   subtree: true,
   characterData: true,
   attributes: true,
 })
+
 // 定期的に送信
 setInterval(sendMessage, 300)

src/sidepanel/App.tsx

@@ -13,31 +13,44 @@ const ANSWERS = {
 }
 
 function App() {
-  // 現在の問題番号 
   const [step, setStep] = useState(1)
-  // 判定結果
   const [result, setResult] = useState<CheckResult | null>(null)
   const [error, setError] = useState<string | null>(null)
 
-  // イベントリスナー内で最新の step を参照するための Ref
   const stepRef = useRef(step)
-  // 各ステップの初期値を保持するベースライン
   const baselineRef = useRef<{ p1: string | null; p2: string | null; p3Visible: boolean | null; p4: string | null }>({
     p1: null,
     p2: null,
     p3Visible: null,
     p4: null,
   })
+  const pageKeyRef = useRef<string | null>(null)
+
+// 追加: ステップの永続化
+  useEffect(() => {
+    chrome.storage.local.get(['currentStep']).then(({ currentStep }) => {
+      if (typeof currentStep === 'number') {
+        setStep(currentStep)
+        stepRef.current = currentStep
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    chrome.storage.local.set({ currentStep: step })
+  }, [step])
 
-  // state が変わったら ref も更新しておく
+  // イベントリスナー内で最新の step を参照するための Ref
   useEffect(() => {
     stepRef.current = step
   }, [step])
 
   useEffect(() => {
+    let disposed = false
     let port: chrome.runtime.Port | null = null
 
     const connect = async () => {
+      if (disposed) return
       try {
         const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
         if (!tab?.id) return
@@ -49,6 +62,12 @@ function App() {
             const { p1, p2, p3Visible, p4 } = msg.values
             const currentStep = stepRef.current
 
+            if (msg.pageKey !== pageKeyRef.current) {
+              pageKeyRef.current = msg.pageKey ?? null
+              baselineRef.current = { p1: null, p2: null, p3Visible: null, p4: null }
+              setResult(null)
+            }
+
             if (currentStep === 1) {
               // 初回メッセージでベースラインを記録
               if (baselineRef.current.p1 === null) {
@@ -109,9 +128,12 @@ function App() {
 
         port.onDisconnect.addListener(() => {
           baselineRef.current = { p1: null, p2: null, p3Visible: null, p4: null }
+          pageKeyRef.current = null
           port = null
           setResult(null)
-          setStep(1)
+          if (!disposed) {
+            setTimeout(connect, 200)
+          }
         })
       } catch (e: any) {
         setError(e?.message ?? String(e))
@@ -121,6 +143,7 @@ function App() {
     connect()
 
     return () => {
+      disposed = true
       if (port) {
         try { port.disconnect() } catch {}
       }