Chrome扩展失焦后保持麦克风录制状态的技术方案求助

这个问题确实是Chrome扩展开发里常见的痛点——Popup的生命周期完全和它的可见性绑定，一旦用户点击外部关闭它，整个Popup的JS上下文就被销毁了，录制自然跟着中断。不过有几个成熟的方案能完美解决这个问题，让录制在后台持续进行：

Chrome现在推荐用Service Worker作为扩展的后台运行载体，它的生命周期独立于Popup，只要扩展处于活跃状态（或者被事件唤醒），就能在后台维持录制逻辑。核心思路是：把录制的核心逻辑移到Service Worker里，Popup只负责触发开始/停止的指令，通过消息通信和后台交互。

代码示例： #

Popup侧（仅负责触发指令）

// popup.js
document.getElementById('start-btn').addEventListener('click', () => {
  // 给后台发送开始录制的指令
  chrome.runtime.sendMessage({ action: 'startRecording' });
  // 可以直接关闭Popup，不影响后台录制
  window.close();
});

document.getElementById('stop-btn').addEventListener('click', () => {
  chrome.runtime.sendMessage({ action: 'stopRecording' }, (audioBlob) => {
    // 接收后台返回的音频Blob，执行下载或其他操作
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(audioBlob);
    downloadLink.download = 'my-recording.wav';
    downloadLink.click();
  });
});

后台Service Worker侧（核心录制逻辑）

// service-worker.js
let mediaRecorder = null;
let audioChunks = [];

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'startRecording') {
    // 请求麦克风权限并开始录制
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) audioChunks.push(event.data);
        };
        mediaRecorder.start();
      })
      .catch(err => console.error('麦克风权限获取失败:', err));
  } else if (message.action === 'stopRecording') {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
      mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        audioChunks = [];
        // 把音频Blob返回给Popup
        sendResponse(audioBlob);
      };
      mediaRecorder.stop();
      // 告诉Chrome我们会异步返回响应
      return true;
    }
  }
});

配置manifest.json

别忘了添加必要的权限和后台配置：

{
  "manifest_version": 3,
  "name": "后台录音扩展",
  "version": "1.0",
  "permissions": ["audioCapture"],
  "background": {
    "service_worker": "service-worker.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

如果需要实时显示录制状态（比如时长、音量），可以用Chrome的windows.create API创建一个独立的小窗口，这个窗口的生命周期不会因为点击外部而终止，用户可以最小化它，录制依然继续。

代码示例（Popup触发创建窗口） #

// popup.js
document.getElementById('start-record').addEventListener('click', () => {
  chrome.windows.create({
    url: 'recorder-window.html',
    type: 'popup',
    width: 300,
    height: 180,
    focused: true
  });
  window.close();
});

然后在recorder-window.html里实现完整的录制逻辑，这个窗口只要不手动关闭，录制就会持续进行。

如果担心Service Worker被Chrome回收（虽然录制时MediaRecorder运行会阻止回收），可以把录制的音频片段实时存入IndexedDB，这样即使后台意外重启，也能恢复录制进度。不过这个属于进阶优化，大部分场景下方案1已经足够稳定。

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