如何用Chrome扩展录制Google Meet的Tab音频+麦克风音频

核心问题解决方案 #

1. Offscreen Document的必要性与权限问题 #

• 并非强制要求，但推荐使用。Manifest V3中后台服务工作线程（Service Worker）无法直接访问MediaRecorder或音频上下文，Offscreen Document是官方指定的媒体操作处理载体。
• 权限拒绝问题修复：
  • 在manifest.json中声明"offscreen"权限，同时将目标站点（如https://meet.google.com/*）加入"host_permissions"
  • 启动Offscreen Document时需指定合规的reasons和justification：

    chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['AUDIO_CAPTURE'],
      justification: '录制Tab与麦克风音频'
    });
    

2. 录制方式选择 #

优先采用Offscreen Document，原因如下：

• 内容脚本：受页面上下文限制，跨域权限严格，页面刷新会直接中断录制
• 弹窗：生命周期依赖弹窗状态，关闭弹窗即终止录制进程
• Offscreen Document：后台独立运行，不受页面刷新、弹窗关闭影响，完全适配Manifest V3的媒体操作规范

3. 合并Tab音频与麦克风音频 #

通过AudioContext实现流合并，步骤如下：

1. 分别获取Tab音频流（调用chrome.tabCapture.capture）和麦克风流（调用navigator.mediaDevices.getUserMedia）
2. 创建音频上下文，将两个流连接至同一目标节点：

   async function mergeAudioStreams(tabStream, micStream) {
     const audioContext = new AudioContext();
     const tabSource = audioContext.createMediaStreamSource(tabStream);
     const micSource = audioContext.createMediaStreamSource(micStream);
     const destination = audioContext.createMediaStreamDestination();
   
     tabSource.connect(destination);
     micSource.connect(destination);
   
     return destination.stream;
   }
   

3. 用MediaRecorder录制合并后的流，即可生成包含双轨音频的文件

缺失功能实现步骤 #

录制麦克风音频 #

• 在manifest.json中添加"audioCapture"权限
• 录制前在Offscreen Document中调用navigator.mediaDevices.getUserMedia({ audio: true })请求麦克风权限（Service Worker无法执行此操作）

识别Google Meet麦克风静音状态 #

通过内容脚本监听页面UI状态：

1. 向https://meet.google.com/*注入内容脚本
2. 定位麦克风按钮并监听其状态变化：

   // 内容脚本代码
   const micButton = document.querySelector('div[aria-label*="静音麦克风"]');
   if (!micButton) return;
   
   // 初始状态
   let isMuted = micButton.getAttribute('aria-pressed') === 'true';
   chrome.runtime.sendMessage({ type: 'MIC_STATUS', isMuted });
   
   // 监听状态变更
   new MutationObserver((mutations) => {
     mutations.forEach(mut => {
       if (mut.attributeName === 'aria-pressed') {
         isMuted = micButton.getAttribute('aria-pressed') === 'true';
         chrome.runtime.sendMessage({ type: 'MIC_STATUS', isMuted });
       }
     });
   }).observe(micButton, { attributes: true });
   

完整流程梳理 #

1. 用户点击扩展图标触发录制
2. 后台Service Worker启动Offscreen Document
3. Offscreen Document请求麦克风权限，同时获取当前Tab的音频流
4. 合并两个音频流，启动MediaRecorder开始录制
5. 内容脚本实时监听Meet麦克风状态，同步至Offscreen Document
6. 用户停止录制后，MediaRecorder生成Blob文件，Offscreen通知后台打开新标签页展示音频文件

内容的提问来源于stack exchange，提问作者Prokop Simek