如何在Chrome扩展中保存Audio Blob状态至本地存储？

Chrome的chrome.storage API只能存储可JSON序列化的数据，Blob本身无法直接存入，你之前尝试的ArrayBuffer方案失败是因为ArrayBuffer也不能被JSON直接序列化。最优方案是把Blob转换为Base64编码的Data URL，这是一种文本格式，完全适配chrome.storage的存储要求，之后再从存储中取出解码还原为Blob即可。

完整修改代码 #

以下是更新后的popup.js，包含音频捕获、存储到本地、以及popup加载时恢复音频的逻辑：

// 捕获标签页音频并存储
function captureTabAudio() {
  chrome.tabCapture.capture({ audio: true, video: false }, (stream) => {
    const context = new AudioContext();
    const chunks = [];
    
    if (context.state === 'suspended') {
      context.resume();
    }
    
    const newStream = context.createMediaStreamSource(stream);
    newStream.connect(context.destination);

    const recorder = new MediaRecorder(stream);
    recorder.start();

    setTimeout(() => recorder.stop(), 10000);

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

    recorder.onstop = (e) => {
      const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
      // 把Blob转成Base64 Data URL
      const reader = new FileReader();
      reader.onload = function() {
        const audioBase64 = reader.result;
        // 存入Chrome本地存储
        chrome.storage.local.set({ savedAudio: audioBase64 }, () => {
          console.log("音频已保存到本地存储");
        });
        // 即时加载到audio标签
        document.querySelector("audio").src = URL.createObjectURL(blob);
      };
      reader.readAsDataURL(blob);
    };
  });
}

// Popup加载时恢复存储的音频
document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.local.get('savedAudio', (result) => {
    if (result.savedAudio) {
      // 把Base64还原为Blob
      const [mimePart, dataPart] = result.savedAudio.split(',');
      const mimeString = mimePart.split(':')[1].split(';')[0];
      const byteString = atob(dataPart);
      const ab = new ArrayBuffer(byteString.length);
      const uint8Array = new Uint8Array(ab);
      
      for (let i = 0; i < byteString.length; i++) {
        uint8Array[i] = byteString.charCodeAt(i);
      }
      
      const restoredBlob = new Blob([ab], { type: mimeString });
      document.querySelector("audio").src = URL.createObjectURL(restoredBlob);
    }
  });
});

关键注意事项 #

1. 权限声明：必须在扩展的manifest.json中添加storage权限，否则无法使用chrome.storage API：

{
  "manifest_version": 3,
  "permissions": ["tabCapture", "storage"],
  // 其他配置项...
}

2. 存储大小限制：chrome.storage.local的默认配额约为5MB，如果需要存储更大的音频文件，可以考虑请求额外配额，或者使用IndexedDB替代。
3. 内存清理：使用URL.createObjectURL后，记得在不需要时调用URL.revokeObjectURL释放内存，避免内存泄漏。

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