Chrome扩展TabCapture捕获标签页音频报错求助

尝试使用TabCapture API捕获浏览器标签页音频时，出现以下错误，无法正常捕获当前活动标签页的音频。

报错信息 #

事件处理程序错误: TypeError: chrome.tabCapture.capture 不是一个函数，位于 chrome-extension://kfemjdohcipdogcflpipihilhcgdaiib/background.js:8:31
未收到来自后台脚本的响应。
未检查的runtime.lastError: 响应收到前消息端口已关闭。

原代码 #

background.js #

let audioStream;

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === "check_tab_capture") {
        sendResponse({ exists: !!chrome.tabCapture });
    } else if (request.message === "start_capture") {
        if (chrome.tabCapture) {
            chrome.tabCapture.capture({ audio: true }, (stream) => {
                if (chrome.runtime.lastError) {
                    console.error("Error capturing tab audio:", chrome.runtime.lastError.message);
                    sendResponse({ success: false, error: chrome.runtime.lastError.message });
                    return;
                }
                audioStream = stream;
                console.log("Audio stream captured:", stream);
                sendResponse({ success: true });
            });
        } else {
            console.error("tabCapture API is not available.");
            sendResponse({ success: false, error: "tabCapture API is not available." });
        }
        return true; // Keep the message channel open for asynchronous response
    } else if (request.message === "stop_capture") {
        if (audioStream) {
            audioStream.getTracks().forEach(track => track.stop());
            audioStream = null;
            console.log("Audio capture stopped.");
            sendResponse({ success: true });
        } else {
            sendResponse({ success: false, error: "No active capture to stop." });
        }
    } else {
        sendResponse({ success: false, error: "Unknown command." }); // Handle unknown commands
    }
});

manifest.json #

{
  "manifest_version": 3,
  "name": "Tab Capture Checker",
  "version": "1.0",
  "permissions": [
      "tabCapture"
  ],
  "background": {
      "service_worker": "background.js"
  },
  "action": {
      "default_popup": "popup.html",
      "default_icon": "icon.png"
  },
  "host_permissions":[ 
      "http://*/*",
      "https://*/*",
      "<all_urls>"
    ]
}

popup.js #

document.getElementById('startCapture').addEventListener('click', () => {
    chrome.runtime.sendMessage({ message: "start_capture" }, (response) => {
        if (response) {
            if (response.success) {
                console.log("Capture started successfully.");
            } else {
                console.error("Capture failed:", response.error);
            }
        } else {
            console.error("No response received from the background script.");
        }
    });
});

document.getElementById('stopCapture').addEventListener('click', () => {
    chrome.runtime.sendMessage({ message: "stop_capture" }, (response) => {
        if (response) {
            if (response.success) {
                console.log("Capture stopped successfully.");
            } else {
                console.error("Stop capture failed:", response.error);
            }
        } else {
            console.error("No response received from the background script.");
        }
    });
});

popup.html #

<!DOCTYPE html>
<html>
<head>
    <title>Tab Capture Checker</title>
    <script src="popup.js" defer></script> <!-- Use defer to ensure the script runs after the DOM is loaded -->
</head>
<body>
    <h1>Tab Capture API Checker</h1>
    <button id="startCapture">Start Capture</button>
    <button id="stopCapture" disabled>Stop Capture</button>
</body>
</html>

问题原因 #

在Manifest V3中，chrome.tabCapture.capture API不能在Service Worker（即后台脚本）中调用。该API要求必须在有用户交互的上下文（比如弹窗、内容脚本或扩展内页面）中执行，且需要直接响应用户操作（如点击按钮）。

修复方案 #

将捕获音频的逻辑从background.js移到popup.js中，直接在用户点击按钮的回调里调用chrome.tabCapture.capture，同时在弹窗中管理音频流：

修改后的popup.js #

let audioStream = null;
const startBtn = document.getElementById('startCapture');
const stopBtn = document.getElementById('stopCapture');

startBtn.addEventListener('click', async () => {
    try {
        // 直接在弹窗中调用tabCapture.capture
        audioStream = await chrome.tabCapture.capture({ audio: true, video: false });
        console.log("音频流已捕获:", audioStream);
        startBtn.disabled = true;
        stopBtn.disabled = false;
        console.log("捕获已成功启动。");
    } catch (error) {
        console.error("捕获失败:", error.message);
    }
});

stopBtn.addEventListener('click', () => {
    if (audioStream) {
        audioStream.getTracks().forEach(track => track.stop());
        audioStream = null;
        startBtn.disabled = false;
        stopBtn.disabled = true;
        console.log("捕获已成功停止。");
    } else {
        console.error("停止捕获失败: 没有正在进行的捕获任务。");
    }
});

修改后的background.js（可简化） #

// 仅保留必要的消息监听，移除捕获逻辑
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === "check_tab_capture") {
        sendResponse({ exists: !!chrome.tabCapture });
    } else {
        sendResponse({ success: false, error: "未知命令。" });
    }
});

关键说明 #

1. 用户交互触发：chrome.tabCapture.capture必须在用户直接交互（如点击按钮）的回调中调用，Chrome安全策略不允许无用户交互的自动调用。
2. Manifest V3限制：Service Worker作为无UI的后台脚本，无法访问需要UI上下文或用户交互的API，这类操作必须放在弹窗、内容脚本等有交互的上下文中执行。

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