Chrome扩展Manifest V3中tabCapture API调用失败及录制中断问题求助

问题根源 #

1. 后台Service Worker无法调用tabCapture：Manifest V3的后台是无界面的Service Worker，而chrome.tabCapture.capture()要求必须由用户主动交互触发（如点击按钮），Service Worker没有交互上下文，导致chrome.tabCapture未定义，抛出类型错误。
2. Popup关闭录制中断：Popup是临时页面，关闭后其内存中的媒体流对象会被销毁，录制依赖的流失效，自然停止。

分步解决方案 #

1. 清单文件配置 #

确保manifest.json包含必要权限和字段：

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

2. Popup触发录制，后台托管流 #

让Popup处理用户点击（满足交互要求），然后将媒体流传递给后台Service Worker持有，这样Popup关闭后录制不会中断。

popup.html（需添加按钮元素）

<button id="startBtn">开始录制</button>
<button id="stopBtn">停止录制</button>
<script src="popup.js"></script>

popup.js

document.getElementById('startBtn').addEventListener('click', async () => {
  // 必须在用户点击事件内调用tabCapture，符合Chrome安全限制
  const stream = await chrome.tabCapture.capture({audio: true, video: true});
  
  // 建立与后台的长连接，传递流对象
  const port = chrome.runtime.connect({name: 'record-channel'});
  port.postMessage({cmd: 'start', stream});

  // 停止录制逻辑
  document.getElementById('stopBtn').addEventListener('click', () => {
    port.postMessage({cmd: 'stop'});
    stream.getTracks().forEach(track => track.stop());
    port.disconnect();
  });
});

background.js

let mediaRecorder = null;
let recordedChunks = [];

// 监听与Popup的长连接
chrome.runtime.onConnect.addListener(port => {
  if (port.name !== 'record-channel') return;

  port.onMessage.addListener(msg => {
    if (msg.cmd === 'start') {
      // 后台初始化录制器，持有流对象避免Popup关闭后销毁
      mediaRecorder = new MediaRecorder(msg.stream);
      mediaRecorder.ondataavailable = e => {
        if (e.data.size > 0) recordedChunks.push(e.data);
      };
      mediaRecorder.onstop = () => {
        // 生成视频文件并触发下载
        const blob = new Blob(recordedChunks, {type: 'video/webm'});
        const url = URL.createObjectURL(blob);
        chrome.downloads.download({url, filename: 'tab-recording.webm'});
        recordedChunks = [];
      };
      mediaRecorder.start();
    } else if (msg.cmd === 'stop') {
      if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
      }
    }
  });
});

3. 内容脚本的正确调用方式（如需页面内按钮） #

如果要在网页内添加录制按钮，不能直接调用tabCapture，需通过消息通知Popup触发（注意：此时Popup需要处于可交互状态，或先打开Popup）：

content-script.js

// 创建页面内录制按钮
const recordBtn = document.createElement('button');
recordBtn.textContent = '录制当前标签';
recordBtn.style.cssText = 'position:fixed;top:10px;right:10px;z-index:9999';
document.body.appendChild(recordBtn);

recordBtn.addEventListener('click', () => {
  // 打开Popup（确保触发链源于用户交互）
  chrome.action.openPopup();
});

核心规则 #

• 必须在用户交互事件内调用tabCapture：Chrome的安全限制，禁止无用户触发的屏幕录制。
• 媒体流由后台持有：避免依赖Popup的临时上下文，保证录制在Popup关闭后持续进行。
• Manifest V3的Service Worker仅做后台逻辑处理，用户交互相关操作交给Popup或内容脚本的用户事件。

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