第八部分 — 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 参考资料

相关推荐
Setsuna_F_Seiei3 小时前
前端转型 Agent 开发 05 之 Agent Hooks 与 Checkpointer(让 Agent 从全自动转变人为可掌控)
前端·agent·ai编程
百万蹄蹄向前冲5 小时前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙5 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan7 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen7 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理8 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒8 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche15009 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情6739 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具
SoonITer9 小时前
怎样构建一个 Agent-friendly 的网站
前端·agent