Chrome扩展开发：如何免弹窗录制当前标签页？

嘿，这个问题我刚好折腾过！Screencastify这类扩展能跳过选择弹窗直接录当前标签页，核心是用Chrome专门的tabCapture API，而不是依赖会弹出选择框的desktopCapture。下面给你拆解具体实现步骤：

1. 配置必要的权限 #

首先在你的manifest.json里必须声明正确的权限，activeTab和tabCapture是关键——前者允许你访问当前激活的标签页，后者提供直接捕获标签页流的能力：

{
  "manifest_version": 3,
  "name": "标签页录屏工具",
  "version": "1.0",
  "permissions": ["activeTab", "tabCapture"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": "icon.png"
  }
}

2. 直接捕获当前标签页的实现 #

在后台脚本（比如background.js）里，通过用户触发的操作（比如点击扩展图标）来调用chrome.tabCapture.capture()，这个API会直接返回当前激活标签页的媒体流，完全不需要弹出选择框：

chrome.action.onClicked.addListener(async (currentTab) => {
  // 捕获当前标签页的音视频流
  const tabStream = await chrome.tabCapture.capture({
    audio: true, // 是否捕获音频
    video: true, // 是否捕获视频
    videoConstraints: {
      mandatory: {
        maxWidth: 1920,
        maxHeight: 1080
      }
    }
  });

  // 用MediaRecorder处理流，完成录制逻辑
  const mediaRecorder = new MediaRecorder(tabStream, { mimeType: 'video/webm' });
  const recordingChunks = [];

  mediaRecorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
      recordingChunks.push(event.data);
    }
  };

  mediaRecorder.onstop = () => {
    const recordingBlob = new Blob(recordingChunks, { type: 'video/webm' });
    const downloadUrl = URL.createObjectURL(recordingBlob);
    // 触发下载录制好的视频
    chrome.downloads.download({
      url: downloadUrl,
      filename: `tab-recording-${Date.now()}.webm`
    });
    // 释放URL对象
    URL.revokeObjectURL(downloadUrl);
  };

  // 开始录制，这里示例录制10秒后停止，你可以改成开关逻辑
  mediaRecorder.start();
  setTimeout(() => {
    mediaRecorder.stop();
    // 停止流的捕获
    tabStream.getTracks().forEach(track => track.stop());
  }, 10000);
});

3. 关键原理说明 #

• chrome.desktopCapture.chooseDesktopMedia()之所以会弹窗，是因为它需要用户明确选择捕获源（屏幕、窗口、标签页），属于通用的桌面捕获API；
• 而tabCapture是Chrome专为标签页捕获设计的API，当你拥有activeTab权限时，它可以直接定位到当前用户激活的标签页，不需要额外选择——这就是Screencastify实现无弹窗录制的核心。

注意事项 #

• 必须通过用户交互触发（比如点击扩展图标、页面按钮）才能调用tabCapture，Chrome不允许静默触发，这是浏览器的安全限制；
• 如果需要捕获非当前激活的标签页，可以先通过chrome.tabs.query()获取目标标签页的ID，然后在capture配置里指定tabId参数即可；
• 以上示例是Manifest V3的写法，如果你用V2，只需要把chrome.action换成chrome.browserAction，背景脚本配置改成"background": { "page": "background.html" }即可。

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