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

相关推荐
问心无愧05137 小时前
ctf show web入门110
前端·笔记
拉拉肥_King7 小时前
Vue 3 主题切换深度解析:从炫酷动画到零闪烁方案
前端·vue.js
excel7 小时前
为什么 Pinia + localForage 持久化后,页面初始化拿不到数据?
前端
雨雨雨雨雨别下啦7 小时前
vant介绍
前端
小小小小宇7 小时前
大模型失忆问题探讨
前端
wordbaby7 小时前
rn-cross-calendar:一个兼容 React 18/19、RN/RNOH 的跨平台日历组件
前端·react native·harmonyos
weixin_523185327 小时前
Collections.unmodifiableMap详解:真的不可修改吗?
java·linux·前端
江米小枣tonylua7 小时前
关掉 VSCode:在 NeoVim12 上配置 Claude Code
前端·程序员
2301_773643628 小时前
ceph镜像
前端·javascript·ceph
程序员黑豆8 小时前
AI全栈开发之Java:什么是JDK
前端·后端·ai编程