如何通过Chrome扩展获取当前播放音频流信息？

Chrome的原生音频播放面板依赖HTML5的Media Session API和页面媒体元素数据，扩展可以通过以下方式直接获取这类信息：

1. 定位活跃音频标签页 #

先用chrome.tabs API筛选出正在播放音频的标签：

// 后台脚本：获取所有发声的标签页
chrome.tabs.query({audible: true}, (tabs) => {
  tabs.forEach(tab => {
    console.log('发声标签:', tab.id, tab.title);
    // 后续针对该标签获取媒体元数据
  });
});

2. 注入内容脚本读取媒体元数据 #

Chrome面板的核心数据来自页面的navigator.mediaSession，这是最可靠的数据源，其次是页面内的<audio>/<video>元素。给目标标签注入内容脚本提取信息：

步骤1：配置扩展权限 #

在manifest.json中声明必要权限：

{
  "manifest_version": 3,
  "permissions": ["tabs", "scripting"],
  // 可选：如果需要对所有站点生效，添加host permissions
  "host_permissions": ["<all_urls>"]
}

步骤2：内容脚本提取逻辑 #

// 内容脚本：获取当前播放媒体的完整信息
function extractMediaInfo() {
  // 优先读取Media Session（Chrome原生面板的数据源）
  if (navigator.mediaSession?.metadata) {
    const md = navigator.mediaSession.metadata;
    return {
      type: 'media-session',
      title: md.title,
      artist: md.artist,
      album: md.album,
      artwork: md.artwork?.map(art => art.src)
    };
  }
  //  fallback：直接查询活跃的媒体元素
  const activeMedia = [...document.querySelectorAll('audio, video')].find(el => !el.paused);
  if (activeMedia) {
    return {
      type: 'media-element',
      title: activeMedia.title || activeMedia.currentSrc.split('/').pop(),
      src: activeMedia.currentSrc,
      duration: activeMedia.duration
    };
  }
  return null;
}

步骤3：后台脚本调用并接收数据 #

// 后台脚本：给发声标签注入脚本并获取结果
chrome.tabs.query({audible: true}, (tabs) => {
  tabs.forEach(tab => {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: extractMediaInfo
    }).then(results => {
      const mediaInfo = results[0].result;
      if (mediaInfo) {
        console.log('当前播放音频信息:', mediaInfo);
        // 这里可以处理信息，比如展示到扩展弹窗
      }
    });
  });
});

3. 实时监听播放状态变化 #

如果需要实时跟踪音频的启停或元数据更新，可以监听标签页状态变化：

// 后台脚本：监听标签音频状态变更
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 仅当音频状态变化时触发
  if (changeInfo.audible !== undefined) {
    if (changeInfo.audible) {
      // 标签开始播放，提取信息
      chrome.scripting.executeScript({
        target: { tabId },
        function: extractMediaInfo
      }).then(results => {
        // 处理获取到的媒体信息
      });
    } else {
      // 标签停止播放，清理状态
    }
  }
});

兼容性说明 #

这套方法适用于所有Chrome系浏览器（Chromium、Brave、Edge），因为它们共享相同的扩展API和Media Session实现。对于部分自定义播放逻辑的站点，mediaSession依然是最稳定的数据源，和Chrome原生面板的逻辑一致。

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