如何将Chrome扩展Manifest v2的background.html转为Manifest v3的background.js？

Manifest V3的Service Worker运行在无DOM的隔离环境里，没法直接用原来的HTML <audio> 元素，得改用Web Audio API来实现音频流播放，具体操作如下：

1. 编写background.js #

新建background.js文件，用AudioContext加载并播放音频流：

// 初始化AudioContext，兼容不同浏览器
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

async function playStream() {
  try {
    // 请求音频流
    const res = await fetch('http://stream.from_somewhere.com:8000/now.mp3');
    // 转换为ArrayBuffer格式
    const buffer = await res.arrayBuffer();
    // 解码音频数据
    const audioBuffer = await audioContext.decodeAudioData(buffer);
    // 创建音频源节点
    const source = audioContext.createBufferSource();
    
    source.buffer = audioBuffer;
    source.connect(audioContext.destination);
    source.start();

    // 如果是持续流媒体（比如电台），播放结束后自动重新拉流
    source.onended = playStream;
  } catch (err) {
    console.error('音频播放失败:', err);
  }
}

// Service Worker激活时启动音频播放
self.addEventListener('activate', (e) => {
  e.waitUntil(playStream());
});

// 空的fetch监听，确保Service Worker被唤醒时能正常处理音频流请求
self.addEventListener('fetch', () => {});

2. 更新Manifest配置 #

确保manifest.json的background字段正确指向background.js，同时添加必要的权限：

"background": {
  "service_worker": "background.js"
},
"permissions": ["activeTab"],
"host_permissions": ["http://stream.from_somewhere.com:8000/*"]

注意：必须添加host_permissions授权访问音频流的域名，否则会触发浏览器的跨域请求拦截。

重要提示 #

• Service Worker会被浏览器自动回收，要是需要长时间播放音频，建议结合扩展的前台页面（比如弹出页）来维持播放，后台Service Worker的运行时长有严格限制。
• 如果你的音频是HLS这类特殊流媒体协议，可能需要额外的解码工具，但普通MP3流用上面的代码就能正常工作。

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