Browser Extensions
Rules
| Priority | Impact | Reference | Name | Description | Prefix | Condition |
|---|---|---|---|---|---|---|
| 1 | CRITICAL | 1-browser-extension-project-structure | Project Structure | โครงสร้างโปรเจกต์ browser extension ที่ถูกต้อง | browser-ext- | เมื่อสร้างโปรเจกต์ browser extension ใหม่ |
| 2 | CRITICAL | 2-browser-extension-manifest | Manifest Configuration | การกำหนดค่า manifest ให้ถูกต้อง | browser-ext- | เมื่อกำหนดค่า manifest |
| 3 | HIGH | 3-browser-extension-entrypoints | Entrypoints | การใช้งาน entrypoints ใน WXT | browser-ext- | เมื่อสร้าง entrypoints ใหม่ |
| 4 | HIGH | 4-browser-extension-content-scripts | Content Scripts | การใช้งาน content scripts ที่ถูกต้อง | browser-ext- | เมื่อสร้าง content scripts |
| 5 | HIGH | 5-browser-extension-background | Background Scripts | การใช้งาน background scripts ที่ถูกต้อง | browser-ext- | เมื่อสร้าง background scripts |
| 6 | HIGH | 6-browser-extension-permissions | Permissions | การจัดการ permissions ที่ปลอดภัย | browser-ext- | เมื่อกำหนด permissions |
| 7 | MEDIUM | 7-browser-extension-storage | Storage API | การใช้งาน storage API ที่ถูกต้อง | browser-ext- | เมื่อใช้ storage |
| 8 | MEDIUM | 8-browser-extension-messaging | Messaging | การสื่อสารระหว่าง components | browser-ext- | เมื่อสื่อสารระหว่าง components |
| 9 | MEDIUM | 9-browser-extension-ui | UI Components | การสร้าง UI สำหรับ extensions | browser-ext- | เมื่อสร้าง UI |
| 10 | LOW | 10-browser-extension-publishing | Publishing | การ publish extensions ไปยัง stores | browser-ext- | เมื่อ publish extensions |
Scripts
| Priority | Impact | Reference | Name | Description | Prefix | Condition |
|---|---|---|---|---|---|---|
| 1 | CRITICAL | 1-browser-ext-init | Init Project | เริ่มต้นโปรเจกต์ browser extension ใหม่ | browser-ext- | เมื่อสร้างโปรเจกต์ใหม่ |
| 2 | HIGH | 2-browser-ext-dev | Dev Mode | เริ่มโหมด development | browser-ext- | เมื่อต้องการพัฒนา |
| 3 | HIGH | 3-browser-ext-build | Build Extension | Build extension สำหรับ production | browser-ext- | เมื่อต้องการ build |
| 4 | MEDIUM | 4-browser-ext-zip | Zip Extension | Zip extension สำหรับ publishing | browser-ext- | เมื่อต้องการ zip |
| 5 | MEDIUM | 5-browser-ext-publish | Publish Extension | Publish extension ไปยัง stores | browser-ext- | เมื่อต้องการ publish |
Overview
Browser Extensions คือโปรแกรมเสริมที่ทำงานบน web browsers ช่วยเพิ่มความสามารถของ browser และปรับปรุงประสบการณ์การใช้งานของผู้ใช้
WXT เป็น framework สำหรับสร้าง web extensions ที่รองรับหลาย browser (Chrome, Firefox, Edge, Safari) และทั้ง MV2 และ MV3 มีคุณสมบัติหลักๆ ดังนี้:
- •Multi-browser Support: รองรับ Chrome, Firefox, Edge, Safari และ Chromium browsers
- •MV2 & MV3: สร้าง extensions สำหรับทั้ง Manifest V2 และ V3
- •Fast HMR: Hot Module Replacement ที่รวดเร็วสำหรับ UI development
- •File-based Entrypoints: Manifest ถูกสร้างจากไฟล์ในโปรเจกต์
- •TypeScript: รองรับ TypeScript โดย default
- •Auto-imports: Nuxt-like auto-imports เพื่อเร่งการพัฒนา
- •Frontend Framework Agnostic: รองรับหลาย frontend frameworks
- •Module System: Reuse code ได้หลาย extensions
- •Automated Publishing: Zip, upload, submit, และ publish extensions อัตโนมัติ
- •Bundle Analysis: Tools สำหรับวิเคราะห์ bundle size
Project Structure
โครงสร้างโปรเจกต์ browser extension ที่ใช้ WXT:
code
📂 {rootDir}/
├── .output/ # Build artifacts
├── .wxt/ # Generated by WXT (TS config)
├── assets/ # CSS, images, assets
├── components/ # UI components (auto-imported)
├── composables/ # Composable functions (auto-imported)
├── entrypoints/ # Entrypoints ทั้งหมด
│ ├── background.ts # Background script
│ ├── popup.html # Popup page
│ ├── options.html # Options page
│ ├── content.ts # Content script
│ └── ...
├── hooks/ # React/Solid hooks (auto-imported)
├── modules/ # WXT modules
├── public/ # Static files
├── utils/ # Utility functions (auto-imported)
├── .env # Environment variables
├── .env.publish # Environment variables for publishing
├── app.config.ts # Runtime config
├── package.json # Package manager file
├── tsconfig.json # TypeScript config
├── web-ext.config.ts # Browser startup config
└── wxt.config.ts # Main WXT config
Entrypoints
WXT ใช้ไฟล์ใน entrypoints/ เป็น inputs เมื่อ bundle extension แต่ละ entrypoint ถูกกำหนดจากชื่อไฟล์หรือโฟลเดอร์:
Background Scripts
- •
background.tsหรือbackground/index.ts- Background script/service worker
Pages
- •
popup.htmlหรือpopup/index.html- Popup page - •
options.htmlหรือoptions/index.html- Options page - •
newtab.htmlหรือnewtab/index.html- New tab page - •
history.htmlหรือhistory/index.html- History page - •
bookmarks.htmlหรือbookmarks/index.html- Bookmarks page - •
devtools.htmlหรือdevtools/index.html- Devtools page - •
sidepanel.htmlหรือsidepanel/index.html- Side panel
Content Scripts
- •
content.tsหรือcontent/index.ts- Content script - •
{name}.content.ts- Named content script - •
{name}.content/index.ts- Named content script in folder
Other
- •
sandbox.htmlหรือsandbox/index.html- Sandboxed page - •
{name}.html- Unlisted page - •
{name}.ts- Unlisted script - •
{name}.css- Unlisted CSS
Manifest Generation
Manifest ถูกสร้างจากหลายแหล่ง:
- •Global options ใน
wxt.config.ts - •Entrypoint-specific options ในแต่ละ entrypoint
- •WXT Modules
- •Hooks
Installation
ใช้คำสั่ง init เพื่อสร้างโปรเจกต์ใหม่:
bash
pnpm dlx wxt@latest init # หรือ bunx wxt@latest init # หรือ npx wxt@latest init
Development
เริ่มโหมด development:
bash
wxt
Browser จะเปิดอัตโนมัติเมื่อเริ่ม development
Building
Build extension สำหรับ production:
bash
wxt build
Target browser เฉพาะ:
bash
wxt -b chrome wxt -b firefox
Publishing
Publish extension ไปยัง stores:
bash
wxt publish