Chrome Extension Starter

ภาพรวม

สร้าง Chrome Extension ครั้งแรกต้องตั้งค่า Manifest V3 + bundler ซึ่งใช้เวลานาน template นี้ setup ทุกอย่างไว้แล้ว — รัน npm run dev แล้วได้ extension ที่ load ใน Chrome ได้เลย พร้อม hot reload ระหว่างพัฒนา

สิ่งที่ทำแล้ว

• Manifest V3 — ตั้งค่า permissions, content_scripts, background service worker ครบ
• Vite build — แยก entry point สำหรับ popup, content, background อัตโนมัติ
• TypeScript strict — type ครบ รวมถึง Chrome API types (@types/chrome)
• Popup UI — HTML/CSS ขั้นต่ำที่ responsive และมี dark mode
• Content Script — inject ใน page พร้อม message passing กับ popup
• Storage helper — wrapper type-safe สำหรับ chrome.storage.local
• Dev workflow — npm run dev สร้าง dist/ แล้ว watch — drag & drop ใน chrome://extensions

โครงสร้างโปรเจกต์

src/
├── popup/       # popup.html + popup.ts
├── content/     # content.ts (inject ใน page)
├── background/  # service-worker.ts
└── types/       # shared types

เทคโนโลยี

• Vite 6 + @crxjs/vite-plugin
• TypeScript strict
• @types/chrome สำหรับ Chrome API
• CSS ธรรมดา (ไม่มี framework — extension UI เล็กพอ)