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

拡張機能の自動zip化

Author: MokeMoke13151105

.github/workflows/build.yml

@@ -0,0 +1,73 @@
+name: build-and-publish-zip
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Install tools
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y jq zip
+
+      - name: Resolve version
+        id: ver
+        shell: bash
+        run: |
+          if [ -f dist/manifest.json ]; then
+            ver=$(jq -r '.version' dist/manifest.json)
+          elif [ -f manifest.json ]; then
+            ver=$(jq -r '.version' manifest.json)
+          else
+            ver=$(jq -r '.version' package.json)
+          fi
+          echo "version=$ver" >> "$GITHUB_OUTPUT"
+
+      - name: Zip dist
+        run: |
+          mkdir -p artifacts
+          cd dist
+          zip -r "../artifacts/extension-v${{ steps.ver.outputs.version }}.zip" .
+          cd -
+
+      - name: Copy to vulnerable-web/downloads
+        run: |
+          mkdir -p vulnerable-web/downloads
+          cp "artifacts/extension-v${{ steps.ver.outputs.version }}.zip" vulnerable-web/downloads/
+          cp "artifacts/extension-v${{ steps.ver.outputs.version }}.zip" vulnerable-web/downloads/latest.zip
+
+      - name: Commit zip into repo
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add vulnerable-web/downloads/*
+          git commit -m "chore: publish extension zip v${{ steps.ver.outputs.version }} [skip ci]" || echo "No changes"
+          git push
+
+      - name: Upload artifact (optional)
+        uses: actions/upload-artifact@v4
+        with:
+          name: extension-v${{ steps.ver.outputs.version }}
+          path: artifacts/*.zip

src/sidepanel/App.tsx

@@ -9,7 +9,6 @@ function checkAnswer(actual: string): CheckResult {
   if (actual === CORRECT_ANSWER) {
     return { ok: true, details: `一致: "${actual}"` }
   } else {
-    // ユーザーにヒントを出す（正解の文字列は見せない）
     return { ok: false, details: `不一致: あなたの入力="${actual}"` }
   }
 }
@@ -60,7 +59,6 @@ function App() {
 
     connect()
 
-    // useEffectのクリーンアップ関数
     return () => {
       if (port) {
         try {
@@ -76,7 +74,9 @@ function App() {
       {error && <p style={{ color: 'red' }}>Error: {error}</p>}
       {result ? (
         <>
-          <div>判定: {result.ok ? '正解' : '不正解'}</div>
+          <h2>問題1</h2>
+          <p>レビューの「とにかくひどい。」を「すばらしい。」に書き換えてみよう！</p>
+          <h2>判定: {result.ok ? '正解' : '不正解'}</h2>
           <div>詳細: {result.details}</div>
         </>
       ) : (

vulnerable-web/index.html

@@ -16,9 +16,9 @@
         <button class="linkButton">ABOUT</button>
         <button class="linkButton">PRODUCTS</button>
         <button class="linkButton">CONTACT</button>
+        <button onclick="location.href='./downloads/latest.zip'" class="linkButton">拡張機能ダウンロード</button>
       </nav>
     </header>
-
     <main>
       <section class="productSection">
         <div class="productImageContainer">
@@ -88,7 +88,6 @@ <h2>レビュー</h2>
         ©2025 ut.code(); 当サイトのコンテンツはフィクションであり、実際の商品・会社とは一切関係ありません。
       </p>
     </footer>
-
     <script src="/script.mjs"></script>
   </body>
 </html>