求助：Chrome URL状态栏实时声音通知扩展仅首次触发问题

原代码存在的核心问题 #

1. chrome.tabs.onUpdated 监听范围有限：仅在页面首次加载（loading状态）时触发，页面内的异步操作（如AJAX加载、新聊天弹出）不会触发该事件。
2. setInterval 轮询效率低且易重复触发：定时查询DOM不仅浪费性能，还可能在状态栏持续显示时重复播放声音。
3. 音频播放限制：Chrome的自动播放政策会阻止content script无交互下的音频播放，导致部分场景下声音无法触发。
4. Manifest V2 兼容性问题：当前Chrome已逐步淘汰V2扩展，权限配置也不足以支持持久化监听。

修改后的完整代码 #

1. manifest.json（升级为Manifest V3）

{
  "manifest_version": 3,
  "name": "URL Status Bar Sound Notifier",
  "version": "1.0",
  "description": "Plays a sound when the URL status bar shows 'Waiting for...'",
  "permissions": ["tabs", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ]
}

2. background.js（服务工作者处理音频播放）

// 接收content script的播放请求，在后台上下文播放声音（绕过自动播放限制）
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "playSound") {
    const audio = new Audio(chrome.runtime.getURL('sound.mp3'));
    audio.play().catch(err => console.error("音频播放失败:", err));
  }
});

3. contentScript.js（用MutationObserver监听状态栏变化）

// 标记当前状态是否已播放过声音，避免重复触发
let hasPlayed = false;

function setupStatusBarObserver() {
  // 创建DOM变化观察者，实时监听状态栏的出现/文本变化
  const observer = new MutationObserver((mutations) => {
    const statusBar = document.querySelector('#status');
    
    if (!statusBar) {
      // 状态栏消失，重置播放标记
      hasPlayed = false;
      return;
    }

    const statusText = statusBar.innerText.toLowerCase();
    if (statusText.includes('waiting for') && !hasPlayed) {
      // 满足条件且未播放过，请求后台播放声音
      chrome.runtime.sendMessage({ action: "playSound" });
      hasPlayed = true;
    } else if (!statusText.includes('waiting for')) {
      // 状态栏文本变化，重置标记
      hasPlayed = false;
    }
  });

  // 配置观察者：监听整个文档的子节点变化和文本内容更新
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    characterData: true
  });
}

// 页面加载完成后启动观察者
if (document.readyState === "complete") {
  setupStatusBarObserver();
} else {
  window.addEventListener("load", setupStatusBarObserver);
}

关键修改说明 #

1. Manifest V3 迁移：使用服务工作者替代持久背景页，符合Chrome最新扩展标准，同时补充scripting和tabs权限以支持DOM监听和标签交互。
2. MutationObserver 替代轮询：实时监听DOM变化，仅在状态栏出现或文本更新时触发逻辑，大幅提升性能。
3. 后台播放音频：将音频播放逻辑移至后台上下文，绕过content script的自动播放限制，确保声音稳定触发。
4. 播放状态标记：通过hasPlayed变量避免状态栏持续显示时重复播放声音，仅在状态切换时触发一次。

注意事项 #

• 确保sound.mp3文件放置在扩展根目录下，路径正确。
• 如果目标页面的状态栏选择器不是#status，需修改document.querySelector的参数为实际元素选择器。
• 测试时在Chrome扩展管理页面开启开发者模式，加载已解压的扩展文件夹。

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