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

判定処理の追加

Author: shirokuma222

public/manifest.json

@@ -13,5 +13,12 @@
     "default_path": "src/sidepanel/index.html"
   },
   "permissions": ["sidePanel", "tabs"],
-  "host_permissions": ["<all_urls>"]
+  "host_permissions": ["<all_urls>"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "run_at": "document_idle"
+    }
+  ]
 }

src/content.ts

@@ -0,0 +1,49 @@
+export {}
+
+type CheckResult = { ok: boolean; details: string }
+// 判定する関数
+function checkAnswer(): CheckResult {
+  const el = document.querySelector<HTMLElement>('[data-check]')
+  if (!el) return { ok: false, details: 'data-check 要素が見つかりません' }
+  const expected = el.getAttribute('data-check') ?? ''
+  const actual = (el.textContent ?? '').trim()
+  return actual === expected
+    ? { ok: true, details: `一致: "${actual}"` }
+    : { ok: false, details: `不一致: expected="${expected}", actual="${actual}"` }
+}
+
+// デバウンス
+const debounce = <T extends (...a: any[]) => void>(fn: T, delay: number) => {
+  let t: number | undefined // タイマーの識別子
+  return (...args: Parameters<T>) => {
+    if (t) clearTimeout(t)
+    // @ts-ignore
+    t = setTimeout(() => fn(...args), delay) as unknown as number
+  }
+}
+
+const ports = new Set<chrome.runtime.Port>()
+
+// サイドパネルからの Port 接続のみ対応
+chrome.runtime.onConnect.addListener((port) => {
+  if (port.name !== 'sidepanel') return
+  ports.add(port)
+  // 接続直後に最新判定を送る
+  port.postMessage({ type: 'UPDATE', result: checkAnswer() })
+  port.onDisconnect.addListener(() => ports.delete(port))
+})
+// DevTools等でのDOM変更を監視し、判定結果をサイドパネルへ通知
+const notify = debounce(() => {
+  const result = checkAnswer()
+  for (const p of ports) {
+    try { p.postMessage({ type: 'UPDATE', result }) } catch {}
+  }
+}, 200) // 200ms ディレイ
+
+const mo = new MutationObserver(() => notify())
+mo.observe(document.documentElement, {
+  childList: true,
+  subtree: true,
+  characterData: true,
+  attributes: true,
+})

src/sidepanel/App.tsx

@@ -1,16 +1,42 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import './App.css'
 
+type CheckResult = { ok: boolean; details: string }
+
 function App() {
-  const [text, setText] = useState('こんにちは、サイドパネル！')
+  const [result, setResult] = useState<CheckResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let disconnected = false
+    ;(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.onMessage.addListener((msg) => {
+          if (disconnected) return
+          if (msg?.type === 'UPDATE' && msg.result) setResult(msg.result as CheckResult)
+        })
+        return () => {
+          disconnected = true
+          try { port.disconnect() } catch {}
+        }
+      } catch (e: any) {
+        setError(e?.message ?? String(e))
+      }
+    })()
+  }, [])
 
   return (
     <div className="container">
-      <h2>{text}</h2>
-      <button onClick={() => setText('更新されました！')}>更新</button>
+      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
+      {result
+        ? (<><div>判定: {result.ok ? '正解' : '不正解'}</div><div>詳細: {result.details}</div></>)
+        : (<div>判定の更新を待機中…</div>)
+      }
     </div>
   )
 }
 
-
 export default App