Safari浏览器扩展：跟踪audible属性变更及播放中断的替代方案

针对Safari不支持通过tabs.onUpdated监听标签页audible属性变化的问题，这里提供几种可行的替代方案，适配你跟踪自动推理引擎中断音乐播放的需求：

方案1：标签页轮询监听 #

Safari扩展API没有直接的音频状态变更事件，可通过定时轮询标签页的audible属性实现状态跟踪：

• 初始化时记录所有标签页的音频状态
• 设置合理的轮询间隔（比如1-2秒），对比标签页当前与历史状态
• 当标签页audible属性从true变为false时，触发中断处理逻辑

示例代码：

// 存储标签页音频状态映射
const tabAudioStates = new Map();

// 初始化所有标签页状态
function initTabStates() {
  safari.application.browserWindows.forEach(window => {
    window.tabs.forEach(tab => {
      tabAudioStates.set(tab.id, tab.audible);
    });
  });
}

// 定时轮询检查状态变化
setInterval(() => {
  safari.application.browserWindows.forEach(window => {
    window.tabs.forEach(tab => {
      const currentState = tab.audible;
      const prevState = tabAudioStates.get(tab.id);
      // 检测到音频从播放转为停止
      if (prevState === true && currentState === false) {
        handlePlaybackStop(tab);
      }
      tabAudioStates.set(tab.id, currentState);
    });
  });
}, 1000); // 间隔可根据需求调整

// 自定义中断处理逻辑
function handlePlaybackStop(tab) {
  console.log(`标签页 ${tab.id} 音频播放停止`);
  // 这里加入你的业务逻辑，比如记录事件、触发扩展动作等
}

// 扩展加载时初始化状态
safari.application.addEventListener('command', initTabStates, false);

方案2：内容脚本监听页面媒体事件 #

如果你的扩展仅针对特定音乐服务网站，可以注入内容脚本直接监听页面内的媒体元素事件：

• 在目标页面注入脚本，监听媒体元素的pause、ended事件
• 事件触发时，通过消息机制通知扩展后台
• 后台接收消息后处理中断逻辑

示例内容脚本（注入到目标网站）：

// 监听现有媒体元素
const mediaElements = document.querySelectorAll('audio, video');
mediaElements.forEach(media => {
  media.addEventListener('pause', () => {
    // 可添加逻辑区分用户手动暂停与自动中断
    safari.self.tab.dispatchMessage('playbackInterrupted', {
      pageUrl: window.location.href
    });
  });
});

// 监听动态加载的媒体元素（应对页面异步渲染）
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.tagName === 'AUDIO' || node.tagName === 'VIDEO') {
        node.addEventListener('pause', () => {
          safari.self.tab.dispatchMessage('playbackInterrupted', {
            pageUrl: window.location.href
          });
        });
      }
    });
  });
});

observer.observe(document.body, { childList: true, subtree: true });

后台接收消息示例：

safari.application.addEventListener('message', event => {
  if (event.name === 'playbackInterrupted') {
    const targetTab = event.target;
    console.log(`页面 ${event.message.pageUrl} 播放中断`);
    // 执行你的扩展逻辑
  }
}, false);

方案3：系统音频会话监听（macOS/iOS专属） #

如果你的扩展面向macOS或iOS平台的Safari，可以利用系统音频会话API监听全局音频中断：

• 通过window.AudioSession监听interruption事件
• 事件触发时，关联当前活跃标签页进行处理

注意：该方案依赖系统级API，需要确认目标平台的兼容性，部分版本可能需要权限配置。

方案选择建议 #

• 需监控所有标签页：优先选方案1，适配性最广
• 仅针对特定音乐网站：方案2更精准，性能开销更低
• 跨平台场景：可结合多种方案，根据运行环境自动切换

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