浏览器扩展通信测试

这个扩展演示了Chrome扩展中不同组件之间的通信方式，包括长连接和短连接两种通信模式。

项目结构

• background/: 后台服务工作进程
• content/: 内容脚本，注入到页面中
• offscreen/: 离屏页面，用于处理特殊功能
• popup/: 扩展弹出窗口
• icons/: 扩展图标资源

通信功能

长连接 (chrome.runtime.connect)

• Content Script ↔ Background Service Worker
• Offscreen Document ↔ Background Service Worker

短连接 (chrome.runtime.sendMessage)

• Popup → Background Service Worker
• Content Script → Background Service Worker → Offscreen Document

具体功能

1. 页面注入

   • 在页面右下角注入一个固定面板
   • 面板包含消息日志显示和测试按钮
   • 支持实时显示通信消息

2. 标签页监控

   • 监听标签页切换事件
   • 监听标签页更新事件
   • 向 Content Script 推送标签页信息

3. 消息中转

   • Background 作为中心节点
   • 管理所有组件之间的消息转发
   • 维护长连接状态

4. 测试功能

   • Popup 界面提供测试按钮
   • Content Script 面板提供消息发送功能
   • Offscreen 页面提供定时消息更新

使用说明

1. 安装扩展

   • 打开 Chrome 扩展管理页面 (chrome://extensions/)
   • 启用开发者模式
   • 加载已解压的扩展程序，选择项目目录

2. 测试通信

   • 访问 YouTube 网站（扩展仅在 YouTube 域名下生效）
   • 观察页面右下角的注入面板
   • 点击面板中的发送按钮测试长连接通信
   • 点击扩展图标，在弹出窗口中测试短连接通信

3. 调试方法

   • 打开开发者工具查看 Console 日志
   • 查看面板中的消息记录
   • 通过 chrome://extensions 页面访问 background 和 offscreen 的调试窗口

注意事项

1. 扩展仅在 YouTube 网站下运行
2. 需要保持 Background Service Worker 活跃
3. 所有中文消息已进行 UTF-8 编码处理
4. 面板样式使用固定定位，可能与页面元素有重叠

开发说明

• manifest.json 使用 V3 版本
• 使用 ES6+ 语法
• 样式采用原生 CSS
• 遵循 Chrome 扩展最佳实践