Chrome扩展Manifest V3中getUserMedia捕获Tab内容报错排查

1. API调用方式过时：Manifest V3中，Chrome已不再推荐通过navigator.mediaDevices.getUserMedia搭配Chrome专属约束（如chromeMediaSource: 'tab'）捕获Tab内容，这种旧用法存在权限隔离问题，易触发DOMException。
2. 旧约束语法不兼容：你之前使用的mandatory字段属于废弃的MediaStream约束语法，仅在旧版Chrome中可能生效，Manifest V3环境下已不支持，这是新旧代码表现不一致的核心原因。
3. 上下文权限限制：tabCapture权限仅对扩展自身上下文（后台Service Worker、弹出页、选项页）生效，若在内容脚本等受限上下文调用，会直接失败。

1. 完善manifest.json配置 #

确保权限和组件声明正确：

{
  "manifest_version": 3,
  "name": "Tab录制工具",
  "version": "1.0",
  "permissions": ["tabCapture", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

2. 使用chrome.tabCapture.capture替代getUserMedia #

在扩展弹出页或后台Service Worker中调用官方推荐的API，以下是弹出页实现示例：

popup.html #

<button id="startCapture">开始捕获Tab</button>
<video id="preview" controls></video>
<button id="startRecord">开始录制</button>
<button id="stopRecord">停止录制</button>
<script src="popup.js"></script>

popup.js #

// 捕获Tab流
document.getElementById('startCapture').addEventListener('click', async () => {
  try {
    // 获取当前激活的Tab
    const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
    // 调用tabCapture API捕获流
    const tabStream = await chrome.tabCapture.capture({
      audio: true, // 按需开启音频捕获
      video: true,
      videoConstraints: {
        width: {ideal: 1920},
        height: {ideal: 1080}
      }
    });
    // 绑定到视频元素预览
    const previewVideo = document.getElementById('preview');
    previewVideo.srcObject = tabStream;
    await previewVideo.play();
  } catch (err) {
    console.error('Tab捕获失败:', err);
  }
});

// 录制功能实现
let mediaRecorder;
let recordedChunks = [];

document.getElementById('startRecord').addEventListener('click', () => {
  const stream = document.getElementById('preview').srcObject;
  if (!stream) return;
  
  recordedChunks = [];
  mediaRecorder = new MediaRecorder(stream);
  
  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };
  
  mediaRecorder.onstop = () => {
    const videoBlob = new Blob(recordedChunks, {type: 'video/webm'});
    const downloadUrl = URL.createObjectURL(videoBlob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = 'tab-recording.webm';
    a.click();
    URL.revokeObjectURL(downloadUrl);
  };
  
  mediaRecorder.start();
});

document.getElementById('stopRecord').addEventListener('click', () => {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
  }
});

3. 跨上下文调用注意事项 #

如果需要从内容脚本触发Tab捕获，需通过消息传递调用后台Service Worker的逻辑：

内容脚本（content.js） #

// 向后台发送捕获请求
chrome.runtime.sendMessage({action: 'captureTab'}, (response) => {
  if (response.success) {
    console.log('捕获请求已发起');
  }
});

后台Service Worker（background.js） #

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.action === 'captureTab') {
    try {
      const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
      const stream = await chrome.tabCapture.capture({audio: true, video: true});
      // 可通过RTCPeerConnection将流传递给内容脚本，或做其他处理
      sendResponse({success: true});
    } catch (err) {
      sendResponse({success: false, error: err.message});
    }
  }
});

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