Chrome 扩展程序 MV3 架构组件概览

Chrome 扩展程序的核心组成部分与上下文类型

界面类型 生命周期 上下文与作用域
Popup 扩展弹窗 点击扩展工具栏图标时创建渲染;失去焦点、点击外部区域、切换标签 / 关闭窗口时自动销毁,JS 环境完全终止,运行状态不持久 独立 HTML 页面,属于 扩展页面上下文;拥有独立 DOM 与 JS 执行环境,可直接调用绝大多数 Chrome 扩展 API;需通过消息与 Service Worker 通信
Options Page 选项页 打开选项页时创建;对应标签页关闭时销毁。支持两种形态:内嵌到扩展管理页、独立标签页打开 独立 HTML 页面,属于扩展页面上下文;API 权限与 Popup 一致,专门用于扩展配置与设置持久化
Side Panel 侧边栏面板 用户唤起侧边栏时创建实例;关闭侧边栏、切换到不匹配标签页时销毁。支持「全局共用」和「按标签页独立实例」两种模式 独立 HTML 页面,属于 扩展页面上下文;常驻浏览器侧边栏,可与当前页 Content Script 联动,API 权限与 Popup 一致
Chrome URL Override 原生页面覆盖 对应系统页面打开时创建;标签页关闭时销毁。可覆盖三类原生页面:newtab(新标签页)、bookmarks(书签页)、history(历史页) 独立 HTML 页面,属于 扩展页面上下文;通过 manifest 配置替换浏览器内置页面,API 权限同普通扩展页面
Content Script 注入 UI 随宿主页面加载注入(时机由 run_at 控制);随宿主页面关闭 / 刷新销毁 运行在 隔离世界(Isolated World),挂载于宿主页面 DOM 内;可读写 DOM 但与页面原生 JS 完全隔离,无法直接访问页面 window;仅能访问少量 Chrome API(runtime、storage、i18n 等),高级能力需与 Service Worker 通信
Service Worker 后台服务 事件驱动模型:扩展安装、事件触发时唤醒;空闲约 30 秒无事件则自动休眠终止;无持久运行状态,全局变量不可靠,持久化必须依赖 storage 扩展全局后台上下文,无 DOM 环境;是扩展的逻辑中枢,可调用全部 Chrome 扩展 API;MV3 强制要求,替代了 MV2 的 Background Page
DevTools Panel 开发者工具面板 打开 DevTools 并切换到对应 Tab 时创建;关闭 DevTools 或切换标签页时销毁,每个标签页对应独立实例 独立 HTML 页面,运行在DevTools 专属上下文;可调用 chrome.devtools.* 系列 API,需通过消息桥接与页面、后台通信
Extension Window 扩展独立窗口 通过 chrome.windows.create 创建时生成;用户关闭窗口时销毁。支持弹窗、常驻面板、全屏等多种窗口类型 独立 HTML 页面,属于扩展页面上下文;脱离标签栏独立存在,常用于悬浮工具、独立应用窗口场景
Omnibox 地址栏关键字 输入扩展注册关键字后激活会话;回车执行、失焦或清空输入后会话结束。本身无独立页面 无自定义 UI,下拉建议由地址栏原生渲染;全部逻辑运行在 Service Worker 后台上下文
Context Menu 右键菜单 后台注册后持久生效;右键对应区域时浏览器渲染原生菜单;点击菜单项触发后台事件,菜单随右键消失而关闭 浏览器原生 UI,无自定义渲染;逻辑处理在 Service Worker 后台上下文,可配置作用于页面、选中文本、图片、链接等场景
Command 快捷键命令 扩展安装后全局注册生效;按下快捷键时触发后台事件;全程无 UI 展示 无 UI,事件监听在 Service Worker 后台上下文;支持浏览器内快捷键与全局系统快捷键两种范围
Badge 图标角标 API 设置后持续生效,主动修改 / 清除或扩展卸载时消失;与扩展工具栏图标共存 纯 UI 装饰,渲染在扩展工具栏图标上;由 Service Worker 或扩展页面调用 API 控制,无独立执行逻辑
Notification 系统通知 调用 API 后弹出系统气泡,展示数秒后自动消失,也可被用户点击 / 手动关闭销毁 操作系统级原生 UI;由 Service Worker 或扩展页面触发,点击事件回调至后台上下文处理
相关推荐
梦曦i1 小时前
RouterLink v2.5.0:H5端原生能力全面回归
前端·uni-app
小林ixn1 小时前
React + Zustand + JWT:从零实现登录鉴权与请求拦截
前端·react.js·前端框架
葡萄城技术团队1 小时前
下拉多选类型单元格:在 SpreadJS 里接入 xm\-select
前端
粥里有勺糖1 小时前
视野修炼-技术周刊第130期 | 光影效果
前端·javascript·github
小岛前端2 小时前
AI Skills 已经封神,但新的问题却越来越严重!
前端·后端·github
不可求~2 小时前
调用 GPT、Claude、Gemini API 报错怎么办:一套通用排查清单
网络·chrome·gpt
拖孩2 小时前
一个人 + AI 做的小程序,上线 15 天赚了 10 块 5
前端·后端·微信小程序
用户93983829415992 小时前
安卓自动化脚本热更新怎么做?不重新打包 APK 也能更新代码
前端
猫七先生2 小时前
在 React 里用 PMTiles 自托管底图
前端
tanghonghanhaoli2 小时前
【图书翻译】有意义的游戏设计:桌面游戏的方法论与心理学(第1、2章)
前端·游戏·ui