extension-ui

扩展 UI

🚀 升级至 Premium 在 https://app.extensionbooster.net/dashboard/services/extension-ai-kit 获取 Premium 版本

打造专业、精致的 Chrome 扩展界面。不要只做解释——请执行工作流。

工作流（请执行）

第 1 步：检测上下文

1. 检查框架：package.json → React / Vue / Svelte / Vanilla
2. 检查现有 UI 文件：弹出窗口、侧边栏、选项页面、内容脚本
3. 检查是否已配置 Tailwind / shadcn / DaisyUI
4. 确定扩展类型：仅弹出窗口、侧边栏、完整选项页面

第 2 步：分析现有 UI

如果存在 UI 文件：

• 阅读组件文件，检查布局、间距和颜色用法
• 检查深色模式支持（prefers-color-scheme 或 class="dark"）
• 检查无障碍支持：语义化 HTML、aria-label、焦点管理
• 检查是否符合 Chrome 设计语言

报告发现：哪些方面做得好、哪些需要改进，以及优先修复项。

第 3 步：推荐 UI 技术栈

框架	推荐技术栈
React	shadcn/ui + Tailwind（组件质量最佳）
React（精简）	仅 Tailwind + 自定义紧凑主题
Vue	DaisyUI + Tailwind
Svelte	Tailwind + svelte-headlessui
Vanilla	使用 CSS 变量的自定义 CSS

第 4 步：实施改进

按优先级应用修复：

1. 支持深色模式（关键——许多用户使用深色模式）
2. 设置适当的尺寸限制（参见 references/extension-ui-constraints.md）
3. 针对小型界面优化排版和间距
4. 修复无障碍问题（键盘导航、aria、焦点）
5. 添加加载、错误和空状态
6. 添加动画（微妙、快速且恰当）

---

扩展 UI 限制（摘要）

界面	尺寸	主要限制
弹出窗口	最大 800x600px	点击外部时关闭，不可调整大小
侧边栏	宽 320-400px	全高，持续显示
选项页面	整个标签页	标准网页
内容脚本 UI	注入式	通过 shadow DOM 隔离 CSS

完整详情：references/extension-ui-constraints.md

---

深色模式（必需）

始终实现深色模式。扩展需要适配浅色和深色浏览器主题。

/* CSS variables approach */
:root {
  --bg: #ffffff;
  --text: #111827;
  --border: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f2937;
    --text: #f9fafb;
    --border: #374151;
  }
}

在 chrome.storage.sync 中保存用户偏好覆盖设置。

---

小型界面的排版

• 基础字体：系统字体栈——不要使用自定义字体（减小打包体积并提升渲染速度）
• 弹出窗口基础字号：13-14px（确保可读且不溢出）
• 行高：1.4-1.5（比网页默认值更紧凑）
• 字重：400（正文）、500（标签）、600（标题）

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

---

配色方案（符合 Chrome 风格）

• 主色：#1a73e8（Google Blue）或品牌色
• 表面：#ffffff / 深色模式 #1f2937
• 边框：#dadce0 / 深色模式 #374151
• 主文本：#202124 / 深色模式 #f9fafb
• 次要文本：#5f6368 / 深色模式 #9ca3af
• 成功：#34a853，错误：#d93025，警告：#fbbc04

---

动画

• 时长：100-200ms（让弹出窗口感觉即时响应）
• 缓动：进入时使用 ease-out，退出时使用 ease-in
• 避免触发布局的动画（仅使用 transform、opacity）
• 始终遵循 prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

---

无障碍检查清单（简要）

• Tab 顺序合理，所有交互元素均可访问
• 仅含图标的按钮带有 aria-label
• 颜色对比度至少为 4.5:1
• 焦点清晰可见（不要仅移除 :focus-visible）
• 使用语义化 HTML（用 button 而不是 div，用 nav 表示导航）

完整清单：references/accessibility-checklist.md

---

参考资料

• references/extension-ui-constraints.md — 尺寸限制、各界面的布局模式
• references/design-system-setup.md — shadcn/ui、DaisyUI、Tailwind 配置
• references/ux-patterns.md — 加载、错误、空状态、引导
• references/accessibility-checklist.md — 完整的无障碍要求和测试

相关技能

• extension-create — 选择框架并搭建新扩展
• extension-analyze — 分析现有扩展代码库
• extension-assets — 图标、图像、资源优化