使用tabCapture录制标签页后视频无法播放的问题

你遇到的视频黑屏无法播放问题，核心原因有三个：

• Blob URL 上下文失效：URL.createObjectURL生成的URL绑定到创建它的上下文（这里是popup），popup关闭后该URL会立即失效，content脚本无法访问对应的Blob数据。
• MediaRecorder 数据不完整：调用recorder.stop()后，ondataavailable事件可能尚未触发最后一段数据，直接用当前的chunks数组创建Blob会导致视频文件损坏。
• Content脚本逻辑漏洞：创建的overlayButton未添加到页面DOM中，且每次收到消息都会重复绑定点击事件，可能导致异常。

1. 直接传递Blob数据（避免URL失效） #

不要传递Blob URL，而是直接传递Blob原始数据（Chrome会自动处理跨上下文的Blob序列化），在Content脚本中再创建Blob URL。

2. 确保MediaRecorder数据完整 #

在recorder.onstop事件中处理Blob创建，该事件会在ondataavailable完成所有数据推送后触发，保证数据完整性。

3. 修复Content脚本DOM操作逻辑 #

将按钮添加到页面中，且只绑定一次点击事件，避免重复创建视频元素。

popup.js #

textBtn.addEventListener('click', function() {
  chrome.tabCapture.capture({ video: true, audio: true }, (stream) => {
    const recorder = new MediaRecorder(stream);
    const chunks = [];

    recorder.ondataavailable = (event) => {
      chunks.push(event.data);
    };

    recorder.onstop = () => {
      stream.getTracks().forEach(track => track.stop());
      const blob = new Blob(chunks, { type: "video/webm" });
      
      chrome.tabs.query({ active: true, currentWindow: true }, (tabsw) => {
        const currentTabId = tabsw[0].id;
        chrome.scripting.executeScript({
          files: ["content.js"],
          target: { tabId: currentTabId }
        }, () => {
          chrome.tabs.sendMessage(currentTabId, { blob, type: "video/webm" });
        });
      });
    };

    recorder.start();

    setTimeout(() => {
      recorder.stop();
    }, 3 * 1000);
  });
});

content.js #

// 创建并添加按钮到页面
const overlayButton = document.createElement("button");
overlayButton.innerText = "查看录制视频";
overlayButton.style.position = "fixed";
overlayButton.style.top = "10px";
overlayButton.style.right = "10px";
overlayButton.style.zIndex = "9999";
overlayButton.style.padding = "8px 16px";
document.body.appendChild(overlayButton);

let recordedBlob = null;

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.blob && message.type === "video/webm") {
    recordedBlob = message.blob;
  }
});

// 只绑定一次点击事件
overlayButton.addEventListener('click', function() {
  if (!recordedBlob) return;
  
  const video = document.createElement("video");
  video.src = URL.createObjectURL(recordedBlob);
  video.controls = true;
  video.style.position = "fixed";
  video.style.bottom = "0";
  video.style.right = "0";
  video.style.zIndex = "9998";
  video.style.width = "320px";
  video.style.height = "auto";
  document.body.appendChild(video);
  
  video.load();
  video.play().catch(err => console.error("播放失败:", err));
});

确保扩展manifest.json中声明必要权限：

{
  "manifest_version": 3,
  "name": "标签页录制工具",
  "version": "1.0",
  "permissions": ["tabCapture", "scripting", "activeTab"],
  "action": {
    "default_popup": "popup.html"
  }
}

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