| name | chrome-extension-ui |
| description | Chrome Extensions UX/UI design and implementation guidelines for popups, side panels, content scripts, and options pages. Triggers on tasks involving browser extension UI, manifest v3, chrome APIs. |
Chrome Extensions UX/UI Best Practices
Comprehensive UX/UI design guide for Chrome Extensions, optimized for Manifest V3. Contains 42 rules across 8 categories, prioritized by impact to guide extension UI development and code review.
When to Apply
Reference these guidelines when:
- Building new Chrome extension user interfaces
- Choosing between popup, side panel, or content script UI
- Implementing accessible, keyboard-navigable interfaces
- Designing loading states, error handling, and feedback patterns
- Creating options pages and settings persistence
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|
| 1 | Component Selection | CRITICAL | comp- |
| 2 | Accessibility & Navigation | CRITICAL | access- |
| 3 | Popup Design | HIGH | popup- |
| 4 | Side Panel UX | HIGH | panel- |
| 5 | Content Script UI | MEDIUM-HIGH | inject- |
| 6 | Visual Feedback | MEDIUM | feedback- |
| 7 | Options & Settings | MEDIUM | options- |
| 8 | Icons & Branding | LOW-MEDIUM | brand- |
Quick Reference
1. Component Selection (CRITICAL)
2. Accessibility & Navigation (CRITICAL)
3. Popup Design (HIGH)
4. Side Panel UX (HIGH)
5. Content Script UI (MEDIUM-HIGH)
6. Visual Feedback (MEDIUM)
7. Options & Settings (MEDIUM)
8. Icons & Branding (LOW-MEDIUM)
How to Use
Read individual reference files for detailed explanations and code examples:
Reference Files
