Chrome扩展中点击弹窗外部后如何保持音频继续播放？

问题根因 #

Chrome 扩展的 popup 页面属于临时上下文，只要用户点击弹窗外部、切换标签、最小化浏览器等操作都会直接销毁 popup 整个页面实例，挂载在 popup 上下文的音频元素也会同步被销毁，因此必须把音频播放逻辑从 popup 迁移到持久运行的上下文中。

实现方案（Manifest V3 适用） #

我们采用Chrome MV3 提供的chrome.offscreen API 实现持久音频播放，service worker 本身无法操作DOM和播放音频，offscreen 页面是Chrome官方提供的专门处理这类需要DOM的后台场景的专用上下文。

1. 修改manifest.json配置 #

新增offscreen权限：

{
  "name": "...",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting", "offscreen"],
  "action": {
    "default_popup": "popup.html"
  },
  "host_permissions": ["<all_urls>"]
}

2. 新增offscreen页面（offscreen.html） #

用来承载所有音频实例：

<!DOCTYPE html>
<html>
<body>
  <!-- 音频元素会通过JS动态插入 -->
</body>
<script src="offscreen.js"></script>
</html>

3. 新增offscreen.js（音频逻辑处理） #

// 存储所有音频实例
const audioMap = new Map();

// 监听来自后台的消息
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  const { type, audioSrc } = msg;
  // 没有对应音频实例则创建
  if (!audioMap.has(audioSrc)) {
    const audio = new Audio(audioSrc);
    audioMap.set(audioSrc, {
      instance: audio,
      isPlaying: false
    });
    // 同步播放状态
    audio.onplaying = () => {
      audioMap.get(audioSrc).isPlaying = true;
    };
    audio.onpause = () => {
      audioMap.get(audioSrc).isPlaying = false;
    };
  }
  const audioItem = audioMap.get(audioSrc);
  switch(type) {
    case 'togglePlay':
      if (audioItem.isPlaying) {
        audioItem.instance.pause();
      } else {
        audioItem.instance.play();
      }
      sendResponse(audioItem.isPlaying);
      break;
    case 'getStatus':
      sendResponse(audioItem.isPlaying);
      break;
  }
  return true;
});

4. 修改background.js（管理offscreen生命周期） #

// 保证offscreen页面只创建一次
async function ensureOffscreen() {
  const existingContexts = await chrome.runtime.getContexts({
    contextTypes: [chrome.runtime.ContextType.OFFSCREEN_DOCUMENT]
  });
  if (existingContexts.length > 0) return;
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: ['AUDIO_PLAYBACK'],
    justification: '用于播放用户触发的音频内容'
  });
}

// 转发popup消息到offscreen
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  ensureOffscreen().then(() => {
    chrome.runtime.sendMessage(msg).then(sendResponse);
  });
  return true;
});

5. 修改popup.html（移除本地audio元素） #

<!-- 每个音频对应一个按钮，用data属性存储音频地址 -->
<div class="play" data-audio-src="xxx/xxx.mp3"></div>
<div class="play" data-audio-src="yyy/yyy.mp3"></div>

6. 修改popup.js（只做交互和状态同步） #

const manageAudio = async (playButton) => {
  const audioSrc = playButton.dataset.audioSrc;
  // 页面加载时先同步当前播放状态
  const isPlaying = await chrome.runtime.sendMessage({
    type: 'getStatus',
    audioSrc
  });
  if (isPlaying) {
    playButton.classList.add('paused');
  }
  playButton.addEventListener('click', async () => {
    const newStatus = await chrome.runtime.sendMessage({
      type: 'togglePlay',
      audioSrc
    });
    playButton.classList.toggle('paused', newStatus);
  });
};

$(document).ready(function () {
  for (const playButton of $('.play')) {
    manageAudio(playButton);
  }
});

注意事项 #

• 该方案仅支持Chrome 109及以上版本，这是Chrome官方支持chrome.offscreenAPI的最低版本，符合当前主流Chrome用户覆盖范围
• 如果需要支持更低版本，可以采用注入音频元素到当前激活页面的方案，但是兼容性和体验不如offscreen方案稳定
• 不需要手动销毁offscreen页面，Chrome会在扩展闲置时自动回收资源，不影响性能

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