这个扩展演示了Chrome扩展中不同组件之间的通信方式，包括长连接和短连接两种通信模式。
background/: 后台服务工作进程content/: 内容脚本，注入到页面中offscreen/: 离屏页面，用于处理特殊功能popup/: 扩展弹出窗口icons/: 扩展图标资源
- Content Script ↔ Background Service Worker
- Offscreen Document ↔ Background Service Worker
- Popup → Background Service Worker
- Content Script → Background Service Worker → Offscreen Document
-
页面注入
- 在页面右下角注入一个固定面板
- 面板包含消息日志显示和测试按钮
- 支持实时显示通信消息
-
标签页监控
- 监听标签页切换事件
- 监听标签页更新事件
- 向 Content Script 推送标签页信息
-
消息中转
- Background 作为中心节点
- 管理所有组件之间的消息转发
- 维护长连接状态
-
测试功能
- Popup 界面提供测试按钮
- Content Script 面板提供消息发送功能
- Offscreen 页面提供定时消息更新
-
安装扩展
- 打开 Chrome 扩展管理页面 (chrome://extensions/)
- 启用开发者模式
- 加载已解压的扩展程序，选择项目目录
-
测试通信
- 访问 YouTube 网站（扩展仅在 YouTube 域名下生效）
- 观察页面右下角的注入面板
- 点击面板中的发送按钮测试长连接通信
- 点击扩展图标，在弹出窗口中测试短连接通信
-
调试方法
- 打开开发者工具查看 Console 日志
- 查看面板中的消息记录
- 通过 chrome://extensions 页面访问 background 和 offscreen 的调试窗口
- 扩展仅在 YouTube 网站下运行
- 需要保持 Background Service Worker 活跃
- 所有中文消息已进行 UTF-8 编码处理
- 面板样式使用固定定位，可能与页面元素有重叠
- manifest.json 使用 V3 版本
- 使用 ES6+ 语法
- 样式采用原生 CSS
- 遵循 Chrome 扩展最佳实践