extension-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Extension UI

扩展UI

Build professional, polished Chrome extension interfaces. Do NOT just explain — execute the workflow.

打造专业、精致的Chrome扩展界面。不要仅停留在解释层面——请执行以下工作流。

Workflow (Execute This)

工作流（请执行）

Step 1: Detect context

步骤1：检测上下文

Check framework:
```
package.json
```
→ React / Vue / Svelte / Vanilla
Check existing UI files: popup, sidepanel, options, content scripts
Check if Tailwind / shadcn / DaisyUI already configured
Identify extension type: popup-only, sidepanel, full options page

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

Step 2: Analyze existing UI

步骤2：分析现有UI

If UI files exist:

Read component files for layout, spacing, color usage
Check for dark mode support (
```
prefers-color-scheme
```
or
```
class="dark"
```
)
Check accessibility: semantic HTML, aria-labels, focus management
Check for Chrome design language alignment

Report findings: what's good, what needs improvement, priority fixes.

若存在UI文件：

读取组件文件，分析布局、间距、颜色使用情况
检查深色模式支持（
```
prefers-color-scheme
```
或
```
class="dark"
```
）
检查无障碍性：语义化HTML、aria标签、焦点管理
检查是否贴合Chrome设计语言

输出分析结果：现有优势、待改进点、优先级修复项。

Step 3: Recommend UI stack

步骤3：推荐UI技术栈

Framework	Recommended Stack
React	shadcn/ui + Tailwind (best component quality)
React (minimal)	Tailwind only + custom compact theme
Vue	DaisyUI + Tailwind
Svelte	Tailwind + svelte-headlessui
Vanilla	Custom CSS with CSS variables

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

Step 4: Implement improvements

步骤4：实施改进

Apply fixes in priority order:

Dark mode support (critical — many users use dark mode)
Proper sizing constraints (see
```
references/extension-ui-constraints.md
```
)
Typography and spacing for small surfaces
Accessibility fixes (keyboard nav, aria, focus)
Loading/error/empty states
Animations (subtle, fast, purposeful)

按优先级顺序应用修复：

深色模式支持（关键——大量用户使用深色模式）
合理的尺寸限制（详见
```
references/extension-ui-constraints.md
```
）
小界面区域的排版与间距规范
无障碍修复（键盘导航、aria属性、焦点管理）
加载/错误/空状态处理
动画效果（细微、快速、有明确用途）

Extension UI Constraints (Summary)

扩展UI限制条件（摘要）

Surface	Size	Key Constraints
Popup	max 800x600px	Closes on outside click, no resize
Sidepanel	320-400px wide	Full height, persistent
Options page	Full tab	Standard web page
Content script UI	Injected	CSS isolation via shadow DOM

Full details:

references/extension-ui-constraints.md

界面区域	尺寸	核心限制
弹窗	最大800x600px	点击外部关闭，不可调整大小
侧边栏	320-400px宽	全屏高度，持久显示
选项页	完整标签页	标准网页
内容脚本UI	注入式	通过Shadow DOM实现CSS隔离

详细内容：

references/extension-ui-constraints.md

Dark Mode (Required)

深色模式（必填）

Always implement dark mode. Extensions live in both light/dark browser themes.

css

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

Store user preference override in

chrome.storage.sync

务必实现深色模式。扩展需适配亮色/深色浏览器主题。

css

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

将用户偏好设置存储在

chrome.storage.sync

中。

Typography for Small Surfaces

小界面区域的排版规范

Base font: system font stack — no custom fonts (bundle size + render speed)
Popup base size: 13-14px (readable without overflow)
Line height: 1.4-1.5 (tighter than web default)
Font weights: 400 (body), 500 (label), 600 (heading)

css

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

基础字体：系统字体栈——不使用自定义字体（减少包体积 + 提升渲染速度）
弹窗基础字号：13-14px（无需滚动即可清晰阅读）
行高：1.4-1.5（比网页默认更紧凑）
字体权重：400（正文）、500（标签）、600（标题）

css

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

Color Palette (Chrome-aligned)

Chrome风格配色方案

Primary:
```
#1a73e8
```
(Google Blue) or brand color
Surface:
```
#ffffff
```
/
```
#1f2937
```
dark
Border:
```
#dadce0
```
/
```
#374151
```
dark
Text primary:
```
#202124
```
/
```
#f9fafb
```
dark
Text secondary:
```
#5f6368
```
/
```
#9ca3af
```
dark
Success:
```
#34a853
```
, Error:
```
#d93025
```
, Warning:
```
#fbbc04
```

主色调：
```
#1a73e8
```
（谷歌蓝）或品牌色
背景色：
```
#ffffff
```
/ 深色模式下
```
#1f2937
```
边框色：
```
#dadce0
```
/ 深色模式下
```
#374151
```
正文主色：
```
#202124
```
/ 深色模式下
```
#f9fafb
```
正文次要色：
```
#5f6368
```
/ 深色模式下
```
#9ca3af
```
成功色：
```
#34a853
```
，错误色：
```
#d93025
```
，警告色：
```
#fbbc04
```

Animations

动画效果

Duration: 100-200ms (popup feels instant)
Easing:
```
ease-out
```
for entrances,
```
ease-in
```
for exits
Avoid layout-triggering animations (
```
transform
```
,
```
opacity
```
only)
Always respect
```
prefers-reduced-motion
```

css

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

时长：100-200ms（弹窗需给人即时响应的感觉）
缓动函数：入场用
```
ease-out
```
，退场用
```
ease-in
```
避免触发布局重排的动画（仅使用
```
transform
```
、
```
opacity
```
）
务必尊重
```
prefers-reduced-motion
```
设置

css

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

Accessibility Checklist (Quick)

无障碍快速检查表

Tab order logical, all interactive elements reachable
Icon-only buttons have
```
aria-label
```
Color contrast 4.5:1 minimum
Focus visible (not just
```
:focus-visible
```
removed)
Semantic HTML (
```
button
```
not
```
div
```
,
```
nav
```
for nav)

Full checklist:

references/accessibility-checklist.md

制表符顺序符合逻辑，所有交互元素均可通过键盘访问
仅含图标的按钮需添加
```
aria-label
```
颜色对比度最低达到4.5:1
焦点可见（不可移除
```
：focus-visible
```
样式）
使用语义化HTML（用
```
button
```
而非
```
div
```
，导航用
```
nav
```
）

完整检查表：

references/accessibility-checklist.md

References

参考资料

```
references/extension-ui-constraints.md
```
— Size limits, layout patterns per surface
```
references/design-system-setup.md
```
— shadcn/ui, DaisyUI, Tailwind setup
```
references/ux-patterns.md
```
— Loading, error, empty states, onboarding
```
references/accessibility-checklist.md
```
— Full a11y requirements and testing

```
references/extension-ui-constraints.md
```
— 各界面区域的尺寸限制与布局模式
```
references/design-system-setup.md
```
— shadcn/ui、DaisyUI、Tailwind的配置方法
```
references/ux-patterns.md
```
— 加载、错误、空状态、引导流程等UX模式
```
references/accessibility-checklist.md
```
— 完整的无障碍需求与测试指南