Chinese README

• React 18 + TypeScript 5.7 + Vite 6
• Tailwind CSS 3 + shadcn/ui (Radix UI-based)
• React Router DOM 6
• Zustand (state management)
• i18next (i18n)
• Browser Extension: Manifest V3 (content script + background service worker)

1. Install dependencies

npm install
# or
bun install

2. Start dev server

npm run dev
# or
bun run dev

Local: http://localhost:3000

3. Production build

npm run build
# or
bun run build

Outputs to dist/

4. Browser extension build

• Production

npm run build:extension:prod

Outputs to extension-dist/

• Test

npm run build:extension:test

6. Clean build outputs and caches (safe)

npm run clean

Removes dist/, extension-dist/, release/, and .vite caches (including node_modules/.vite). These are generated artifacts and can be safely deleted; run the corresponding build commands again to regenerate them.

5. Local test page & one-click E2E (test only)

• Serve test page

npm run serve:test

Open http://localhost:8080/test-extension.html

• One‑click E2E smoke

npm run test:e2e

The script will:

• build the test extension
• start the local test page
• auto open http://localhost:8080/test-extension.html?auto=1 Then load the unpacked extension in chrome://extensions from extension-dist/chrome to see PASS/FAIL. Automation runs only on the test page and is not shipped in production.

7. Thorough clean (includes node_modules)

npm run clean:all

Removes everything in clean plus node_modules/. Run npm install afterwards.

8. Lint

npm run lint

• React + TypeScript + Vite; path alias: @/* (see tsconfig.json)
• Styling: Tailwind CSS; UI: shadcn/ui; forms: react-hook-form + zod
• Routing: react-router-dom@6; State: zustand; i18n: i18next
• Extension (MV3): public/contentScript.js, public/background.js, public/manifest.json
• Before commit: run npm run lint; follow Conventional Commits

Below are a few key UI screenshots (English). All images are referenced from the snapshot/ folder.