第八部分 — UI 表面 动作(工具栏)、徽标、弹出窗口

17.1 目的

chrome.action 是主要的 MV3 UI 入口点。 它允许您:

  • 显示一个工具栏图标

  • 设置一个弹出窗口

  • 根据状态更新徽标的文本/颜色

17.2 使用场景 / 避免场景

使用场景: 当你需要一个快速用户触发的入口时。

避免场景: 当你需要一个长时间运行的工作流。 弹出窗口关闭迅速;将长期工作推到服务工作者。

17.3 最简:在状态变化时设置徽标

权限:

  • storage

服务工作者: CODE_BLOCK_68

17.4 弹出窗口 vs 无弹出窗口

  • 带弹出窗口:适用于小型UI和快速设置。

  • 无弹出窗口:点击图标会触发 chrome.action.onClicked。

服务工作者: CODE_BLOCK_69

最小示例

一个最小的 MV3 安全异步消息处理器(适合作为模板使用): CODE_BLOCK_70

17.5 常见问题

  • 在弹出窗口内进行重要工作(弹窗关闭)。

  • 忘记在状态更改后更新徽章。

  • 在每个上下文中依赖 storage.onChanged(建议从服务工作者中更新状态)。

17.6 检查清单

  • 弹出窗口 UI 保持小巧快速

  • 长时间工作运行于服务工作者

  • 徽标反映真实持久状态(存储)

17.7 参考资料

相关推荐
刘卓航众创芯云服务部33 分钟前
Kimi K3复杂任务实测:我把团队最头疼的三个场景全跑了一遍
前端
软件开发技术深度爱好者37 分钟前
小学英语单词魔法学园HTML5实现
javascript·html5·英语学习
勉灬之42 分钟前
Next.js + Prisma 跨平台部署踩坑记
开发语言·javascript·ecmascript
cll_86924189143 分钟前
一个好看的Wordpress博客文字css样式
前端·css·ui
武子康1 小时前
Shippy:确定性工具、会话级 Sandbox 与 Live-Data Eval(4 类收敛 + 7 步实现方案 + 6 类评测指标)
前端·人工智能·后端
糖果店的幽灵1 小时前
langgraph分支之 - 动态分支(Dynamic Branch)
java·前端·javascript·人工智能·langgraph
meilindehuzi_a1 小时前
Workflow 与 Agent 有什么区别:从 LangChain 流水线到智能体决策
前端·人工智能
三翼鸟数字化技术团队1 小时前
一种前端大屏适配方案
前端·css
这是个栗子1 小时前
前端开发中的常用工具函数(九)
开发语言·javascript·ecmascript·at
小四的小六1 小时前
WebView 在 AI 时代的三个被低估的价值——从自己的 AI 产品里找到的答案
前端·openai·ai编程