SuperAPI AI 工具集

chrome-extension-ui

编程与开发

查看项目

更新于 10-16 00:04

技能介绍

用途:为 Chrome 扩展的界面设计与实现提供 UX/UI 最佳实践参考,针对 Manifest V3 优化,包含 8 个类别、42 条规则,按影响程度排序,可用于开发新界面或做代码审查。

适用时机:构建新的扩展界面;在 popup、侧边栏(side panel)与内容脚本 UI 之间做选择;实现可访问、可键盘导航的界面;设计加载状态、错误处理与反馈模式;创建选项页与设置持久化。

规则类别与优先级:1 组件选择(CRITICAL,前缀 comp-);2 可访问性与导航(CRITICAL,access-);3 弹窗设计(HIGH,popup-);4 侧边栏体验(HIGH,panel-);5 内容脚本 UI(MEDIUM-HIGH,inject-);6 视觉反馈(MEDIUM,feedback-);7 选项与设置(MEDIUM,options-);8 图标与品牌(LOW-MEDIUM,brand-)。

主要规则要点:组件选择上,持久任务用侧边栏、页内 UI 用内容脚本、坚持单一用途、最小权限、为操作提供描述性提示;可访问性上,支持完整键盘导航、保持可见焦点指示、图标按钮加 ARIA 标签、保证对比度、避免焦点陷阱、使用语义化 HTML;弹窗上,遵守尺寸限制、即时渲染、突出主操作、优雅处理自动关闭、JS 放外部文件、按状态动态切换;侧边栏上,避免干扰、区分标签页级与窗口级、适配可变宽度、与页面上下文同步、懒加载分区;内容脚本上,用 Shadow DOM 隔离样式、用最大 z-index、DOM 就绪后注入、使用唯一 ID、移除时清理;视觉反馈上,展示加载状态、写可操作的错误信息、用徽章显示状态、确认成功操作、少用通知、长任务显示进度;选项上,简单设置用内嵌页、跨设备同步、变更自动保存、提供合理默认值;图标上,提供全部所需尺寸、设计有辨识度的工具栏图标、徽章文字不超过 4 字符、保持视觉一致、准备高质量商店素材。

使用方式:按需阅读各参考文件获取详细说明与代码示例,包括 references/_sections.md(类别定义与排序)、assets/templates/_template.md(新增规则模板)、metadata.json(版本与参考信息)。

限制:资料未提供具体安装命令、收费方式、支持平台范围与实测效果,暂未提供。