⚡

Chrome扩展UX/UI最佳实践Skill chrome-extension-ui

这个技能提供了Chrome浏览器扩展的用户体验和用户界面设计的最佳实践指南，涵盖组件选择、可访问性、弹出窗口、侧边栏、内容脚本UI等关键方面，优化Manifest V3兼容性，旨在帮助开发者创建高效、易用且符合规范的扩展。关键词：Chrome扩展、UX/UI设计、最佳实践、前端开发、浏览器扩展、Manifest V3、设计指南。

前端开发 0 次安装 0 次浏览更新于 3/18/2026

name: chrome-extension-ui description: Chrome扩展UX/UI设计和实施指南，用于弹出窗口、侧边栏、内容脚本和选项页面。触发涉及浏览器扩展UI、Manifest V3、Chrome API的任务。

Chrome扩展UX/UI最佳实践

Chrome扩展的全面UX/UI设计指南，针对Manifest V3优化。包含42条规则，分为8个类别，按影响优先级排序，以指导扩展UI开发和代码审查。

何时应用

在以下情况下参考这些指南：

构建新的Chrome扩展用户界面
在弹出窗口、侧边栏或内容脚本UI之间选择
实施可访问、键盘可导航的界面
设计加载状态、错误处理和反馈模式
创建选项页面和设置持久化

规则类别按优先级

优先级	类别	影响	前缀
1	组件选择	关键	`comp-`
2	可访问性与导航	关键	`access-`
3	弹出窗口设计	高	`popup-`
4	侧边栏UX	高	`panel-`
5	内容脚本UI	中高	`inject-`
6	视觉反馈	中	`feedback-`
7	选项与设置	中	`options-`
8	图标与品牌	低中	`brand-`

快速参考

1. 组件选择 (关键)

comp-popup-vs-sidepanel - 为持久任务选择侧边栏
comp-content-script-ui - 使用内容脚本进行页面内UI
comp-single-purpose - 设计为单一目的
comp-minimal-permissions - 请求最小权限
comp-action-tooltip - 提供描述性操作工具提示

2. 可访问性与导航 (关键)

access-keyboard-navigation - 启用完整键盘导航
access-focus-visible - 保持可见焦点指示器
access-aria-labels - 为仅图标按钮使用ARIA标签
access-color-contrast - 确保足够的颜色对比度
access-focus-trap - 避免键盘焦点陷阱
access-semantic-html - 使用语义HTML元素

3. 弹出窗口设计 (高)

popup-size-constraints - 在弹出窗口大小限制内设计
popup-instant-render - 即时渲染弹出窗口内容
popup-primary-action - 使主要操作明显
popup-auto-close - 优雅处理弹出窗口自动关闭
popup-external-js - 将JavaScript保存在外部文件中
popup-dynamic-switch - 使用动态弹出窗口进行基于状态的UI

4. 侧边栏UX (高)

panel-non-distracting - 设计不分散注意力的侧边栏
panel-tab-vs-window - 选择标签特定 vs 窗口宽侧边栏
panel-responsive-width - 为可变侧边栏宽度设计
panel-page-context - 同步侧边栏内容与页面上下文
panel-lazy-sections - 延迟加载侧边栏部分

5. 内容脚本UI (中高)

inject-shadow-dom - 使用Shadow DOM进行样式隔离
inject-z-index - 使用最大Z-Index用于覆盖层
inject-document-ready - 在DOM就绪后注入UI
inject-unique-ids - 使用唯一ID以防止冲突
inject-cleanup - 在移除时清理注入的元素

6. 视觉反馈 (中)

feedback-loading-states - 为异步操作显示加载状态
feedback-error-messages - 编写可操作的错误消息
feedback-badge-status - 使用徽章进行一目了然的状态显示
feedback-success-confirmation - 确认成功操作
feedback-notifications - 谨慎使用通知
feedback-progress-indication - 为长时间操作显示进度

7. 选项与设置 (中)

options-embedded-page - 使用嵌入式选项进行简单设置
options-sync-storage - 跨设备同步设置
options-auto-save - 更改时自动保存设置
options-sensible-defaults - 提供合理的默认设置

8. 图标与品牌 (低中)

brand-icon-sizes - 提供所有必需的图标尺寸
brand-distinctive-icon - 设计独特的工具栏图标
brand-badge-text - 保持徽章文本在4个字符以下
brand-consistent-styling - 保持一致的视觉风格
brand-web-store-assets - 创建高质量的网络商店资产

如何使用

阅读个别参考文件以获取详细解释和代码示例：

部分定义 - 类别结构和影响级别
规则模板 - 添加新规则的模板

参考文件

文件	描述
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则的模板
metadata.json	版本和参考信息