Chrome扩展：如何在background.js中实现无选项页的录屏功能？

你遇到的问题核心在于：

• 注入标签页的脚本依赖标签页生命周期，标签页关闭后录制必然终止；
• Manifest V3的Service Worker（原后台脚本）是无头环境，不支持getUserMedia、MediaRecorder等需要DOM/浏览器上下文的API；
• chrome.desktopCapture必须由用户手势触发，且需要在具备交互能力的页面上下文执行。

以下是无需选项页、完全在后台实现稳定录屏的具体方案：

1. Manifest配置核心要点 #

使用后台页面而非Service Worker，因为后台页面是隐藏的HTML页面，具备完整浏览器环境，可处理媒体流录制。同时申请必要权限：

{
  "manifest_version": 3,
  "name": "后台录屏工具",
  "version": "1.0",
  "permissions": ["desktopCapture", "downloads"],
  "background": {
    "page": "background.html"
  },
  "action": {
    "default_title": "点击开始/停止录屏"
  }
}

2. 后台页面与脚本实现 #

创建background.html作为后台载体（仅需引入脚本即可）：

<!DOCTYPE html>
<html>
<body>
  <script src="background.js"></script>
</body>
</html>

background.js实现完整录屏逻辑：

let mediaRecorder = null;
let recordedChunks = [];

// 通过Action按钮触发录屏（符合Chrome用户手势要求）
chrome.action.onClicked.addListener(async () => {
  // 停止录制逻辑
  if (mediaRecorder && mediaRecorder.state === "recording") {
    mediaRecorder.stop();
    chrome.action.setTitle({ title: "点击开始录屏" });
    return;
  }

  // 弹出系统录屏选择框（屏幕/窗口/标签）
  const streamId = await new Promise(resolve => {
    chrome.desktopCapture.chooseDesktopMedia(
      ["screen", "window", "tab"],
      null,
      id => resolve(id)
    );
  });

  if (!streamId) return; // 用户取消选择

  // 获取媒体流
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: true, // 可选：开启音频捕获
    video: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: streamId,
        minWidth: 1280,
        maxWidth: 1920,
        minHeight: 720,
        maxHeight: 1080
      }
    }
  });

  // 初始化MediaRecorder
  mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
  recordedChunks = [];

  // 收集录制片段
  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: url,
      filename: `录屏_${new Date().toISOString().slice(0,19).replace(/:/g,'-')}.webm`
    });
    // 释放资源
    stream.getTracks().forEach(track => track.stop());
    mediaRecorder = null;
    recordedChunks = [];
  };

  // 启动录制
  mediaRecorder.start();
  chrome.action.setTitle({ title: "点击停止录屏" });
});

3. 关键原理说明 #

• 脱离标签页依赖：媒体流和录制逻辑都在后台页面运行，即使原操作标签页关闭，只要后台页面未被Chrome回收（活跃媒体流会阻止回收），录制就会持续。
• 合规触发API：通过Action按钮点击（用户手势）启动录屏流程，规避Chrome对desktopCapture和getUserMedia的调用限制。
• 资源管理：录制结束后主动释放媒体流资源，避免内存泄漏。

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