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.
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.
Reference these guidelines when:
| 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- |
comp-popup-vs-sidepanel - Choose Side Panel for Persistent Taskscomp-content-script-ui - Use Content Scripts for In-Page UIcomp-single-purpose - Design for Single Purposecomp-minimal-permissions - Request Minimal Permissionscomp-action-tooltip - Provide Descriptive Action Tooltipsaccess-keyboard-navigation - Enable Complete Keyboard Navigationaccess-focus-visible - Maintain Visible Focus Indicatorsaccess-aria-labels - Use ARIA Labels for Icon-Only Buttonsaccess-color-contrast - Ensure Sufficient Color Contrastaccess-focus-trap - Avoid Keyboard Focus Trapsaccess-semantic-html - Use Semantic HTML Elementspopup-size-constraints - Design Within Popup Size Limitspopup-instant-render - Render Popup Content Instantlypopup-primary-action - Make the Primary Action Obviouspopup-auto-close - Handle Popup Auto-Close Gracefullypopup-external-js - Keep JavaScript in External Filespopup-dynamic-switch - Use Dynamic Popups for State-Based UIpanel-non-distracting - Design Non-Distracting Side Panelspanel-tab-vs-window - Choose Tab-Specific vs Window-Wide Panelspanel-responsive-width - Design for Variable Panel Widthspanel-page-context - Sync Panel Content with Page Contextpanel-lazy-sections - Lazy Load Panel Sectionsinject-shadow-dom - Use Shadow DOM for Style Isolationinject-z-index - Use Maximum Z-Index for Overlaysinject-document-ready - Inject UI After DOM Readyinject-unique-ids - Use Unique IDs to Prevent Conflictsinject-cleanup - Clean Up Injected Elements on Removalfeedback-loading-states - Show Loading States for Async Operationsfeedback-error-messages - Write Actionable Error Messagesfeedback-badge-status - Use Badge for At-a-Glance Statusfeedback-success-confirmation - Confirm Successful Actionsfeedback-notifications - Use Notifications Sparinglyfeedback-progress-indication - Show Progress for Long Operationsoptions-embedded-page - Use Embedded Options for Simple Settingsoptions-sync-storage - Sync Settings Across Devicesoptions-auto-save - Auto-Save Settings on Changeoptions-sensible-defaults - Provide Sensible Default Settingsbrand-icon-sizes - Provide All Required Icon Sizesbrand-distinctive-icon - Design a Distinctive Toolbar Iconbrand-badge-text - Keep Badge Text Under 4 Charactersbrand-consistent-styling - Maintain Consistent Visual Stylebrand-web-store-assets - Create Quality Web Store AssetsRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |