如何开发可通过麦克风播放MP3音频的Chrome扩展？

一、核心原理 #

要让Google Meet这类通话服务识别MP3音频为麦克风输入，需通过Web Audio API加载MP3并生成可被捕获的MediaStream，再将该流替换或注入到通话页面的音频输入源中。

二、扩展基础结构 #

• manifest.json：配置扩展权限、页面入口及资源访问规则
• popup.html：提供用户触发按钮
• content.js：在目标通话页面注入音频处理逻辑

三、具体实现步骤 #

1. 配置manifest.json #

申请必要权限，确保扩展能访问目标页面并执行脚本：

{
  "manifest_version": 3,
  "name": "MP3转麦克风输入",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  },
  "host_permissions": ["https://meet.google.com/*"],
  "web_accessible_resources": [
    {
      "resources": ["audio/*.mp3"],
      "matches": ["https://meet.google.com/*"]
    }
  ]
}

2. Popup触发页面（popup.html） #

极简按钮设计，点击后向当前激活页面注入处理脚本：

<!DOCTYPE html>
<html>
<head>
  <style>button { padding: 10px; width: 160px; cursor: pointer; }</style>
</head>
<body>
  <button id="startBtn">播放MP3到通话</button>
  <script>
    document.getElementById('startBtn').addEventListener('click', () => {
      chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        chrome.scripting.executeScript({
          target: {tabId: tabs[0].id},
          files: ['content.js']
        });
      });
    });
  </script>
</body>
</html>

3. 核心音频处理脚本（content.js） #

加载MP3、生成模拟麦克风流并替换通话页面的音频输入：

async function injectMP3ToMic() {
  // 初始化音频上下文
  const audioContext = new AudioContext();
  
  // 加载扩展内的MP3文件（需提前把MP3放在audio文件夹下）
  const mp3Res = await fetch(chrome.runtime.getURL('audio/your-audio.mp3'));
  const arrayBuffer = await mp3Res.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  
  // 创建音频源与媒体流输出节点
  const audioSource = audioContext.createBufferSource();
  audioSource.buffer = audioBuffer;
  const streamDest = audioContext.createMediaStreamDestination();
  audioSource.connect(streamDest);
  
  // 获取生成的模拟音频流
  const fakeMicStream = streamDest.stream;
  const fakeMicTrack = fakeMicStream.getAudioTracks()[0];

  // 替换Google Meet的本地音频轨道
  const localVideo = document.querySelector('video[track="local-audio"]');
  if (localVideo?.srcObject) {
    // 停止原生麦克风轨道
    localVideo.srcObject.getAudioTracks().forEach(track => track.stop());
    // 添加模拟音频轨道
    localVideo.srcObject.addTrack(fakeMicTrack);
  }

  // 播放音频
  audioSource.start();
}

injectMP3ToMic();

4. 关键注意事项 #

• 权限要求：首次触发时需确保用户已授予页面麦克风访问权限
• 资源路径：MP3文件需放在扩展目录的audio文件夹下，且在manifest中声明为可访问资源
• 页面兼容性：不同通话服务（如Zoom、Teams）的DOM结构和媒体流处理逻辑不同，需针对性调整content.js中的元素选择和流替换代码
• 音频上下文限制：Chrome要求AudioContext必须由用户交互触发，通过popup按钮触发脚本符合该规则

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