如何在Chrome扩展弹窗关闭后保持音频持续播放？

核心原理 #

Popup页面是临时上下文，关闭后会销毁所有关联资源，因此必须将音频播放逻辑移至后台Service Worker（Manifest V3）或后台页面（Manifest V2），后台脚本不受Popup关闭影响，可长期运行。

具体实现步骤 #

1. 配置Manifest文件

以Manifest V3为例，确保注册后台Service Worker：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

2. 后台脚本（background.js）实现播放逻辑

在后台创建音频实例，通过消息监听接收Popup的控制指令：

let audioPlayer = null;

// 监听来自Popup的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch (message.action) {
    case 'PLAY':
      if (!audioPlayer) {
        // 初始化音频，支持本地文件或合法外部URL
        audioPlayer = new Audio(message.url);
        audioPlayer.loop = message.loop ?? false;
      }
      audioPlayer.play().catch(err => console.error('播放失败:', err));
      sendResponse({status: 'playing'});
      break;
    case 'PAUSE':
      audioPlayer?.pause();
      sendResponse({status: 'paused'});
      break;
    case 'STOP':
      if (audioPlayer) {
        audioPlayer.pause();
        audioPlayer.currentTime = 0;
        audioPlayer = null;
      }
      sendResponse({status: 'stopped'});
      break;
    case 'GET_STATUS':
      const status = audioPlayer && !audioPlayer.paused ? 'playing' : 'paused';
      sendResponse({status});
      break;
  }
});

3. Popup页面发送控制指令

在popup.html的脚本中，通过消息与后台通信，触发播放/暂停操作：

<!-- popup.html -->
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<script src="popup.js"></script>

// popup.js
document.getElementById('playBtn').addEventListener('click', () => {
  chrome.runtime.sendMessage({
    action: 'PLAY',
    url: './audio.mp3', // 本地音频路径，相对于扩展根目录
    loop: true
  }, res => console.log(res.status));
});

document.getElementById('pauseBtn').addEventListener('click', () => {
  chrome.runtime.sendMessage({action: 'PAUSE'}, res => console.log(res.status));
});

// Popup打开时同步播放状态
document.addEventListener('DOMContentLoaded', () => {
  chrome.runtime.sendMessage({action: 'GET_STATUS'}, res => {
    // 根据状态更新UI，比如设置按钮文本
    if (res.status === 'playing') {
      document.getElementById('playBtn').textContent = '继续';
    }
  });
});

注意事项 #

• 音频文件需放在扩展目录内，或使用Chrome允许跨域的外部URL，避免播放失败。
• Manifest V3中，Service Worker无法直接操作DOM，但Audio对象属于Web API，可正常使用。
• 若Service Worker因长期闲置被休眠，正在播放的音频会触发唤醒机制，无需额外处理。

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