当前页面尚未调用扩展（请参阅 activeTab 权限）。 Chrome 页面无法捕获

Question

美好的一天。

我在实施 Google 扩展时遇到问题。出于技术原因，我需要在单独的窗口中打开扩展（因为自动消失的弹出窗口破坏了逻辑）。但是，出现了一个细微差别，即无法从单独的窗口捕获声音，从而导致以下错误：

“捕获选项卡时出错。当前页面尚未调用扩展程序（请参阅 activeTab 权限）。无法捕获 Chrome 页面。”

我已经浏览了类似主题的所有答案，但没有找到或不理解解决方案。其他扩展（例如 Volume Recorder Online）能够提供我需要的功能，但它们的代码很模糊，使我无法理解其中的差异以及为什么它对它们有效但对我不起作用。

我将不胜感激任何帮助。 我附上以下代码：

清单 v3：

  {
    "update_url": "https://clients2.google.com/service/update2/crx",
    
        "name": "AnyTalk",
        "version": "1.0.1",
        "manifest_version": 3,
        "minimum_chrome_version": "114",
        "background": {
            "service_worker": "scripts/window.js"
        },
        "icons": {
            "16": "assets/icon-16.png",
            "32": "assets/icon-32.png",
            "48": "assets/icon-48.png",
            "128": "assets/icon-128.png"
        },
        "action": {
            "default_icon": "assets/icon-128.png",
            "default_title": "AnyTalk"
        },
        "permissions": [
            "tabCapture",
            "downloads",
            "storage",
            "activeTab",
            "system.display",
            "tabs"
        ],
        "host_permissions": [
            "<all_urls>"
        ]
    }

window.js（背景） \ 打开扩展窗口并在查询中发送当前标签

chrome.action.onClicked.addListener(function(tab) {
  var tabId = tab.id;
  chrome.windows.create({
      url: '../views/recorder.html?tabId=' + tabId,
      type: 'popup',
      width: 400,
      height: 500
  }); 
});

记录器.js

let recordingEnabled = false;
let socket = null;
let recorder = null;


function getQueryParam(param) {
    console.log('Executing getQueryParam function');
    var urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}
let tabId = parseInt(getQueryParam("tabId"));

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOMContentLoaded event listener triggered');
    var statusCircle = document.getElementById('status-circle');
    
    statusCircle.addEventListener('click', async function() {
        console.log('statusCircle click event listener triggered');
        if (recordingEnabled) {
            console.log('Recording is enabled. Stopping recording...');
            recordingEnabled = false;
            statusCircle.style.backgroundColor = 'blue';
            stopRecording();
        } else {
            console.log('Recording is disabled. Starting recording...');
            recordingEnabled = true;
            statusCircle.style.backgroundColor = 'red';
            captureTab(tabId);
        }
    });
});
function captureTab(tabId) {
    console.log('Executing captureTab function');

    console.log(typeof(tabId))
    chrome.tabs.update(tabId, { active: true }, function(tab) {
        if (chrome.runtime.lastError) {
            console.error('Error when updating a tab', chrome.runtime.lastError.message);
            return;
        }
        console.log('Tab updated:', tab);

        var captureOptions = { audio: true, video: false };
        chrome.tabCapture.capture(captureOptions, function(stream) {
            console.log('Tab captured:', stream);
            if (chrome.runtime.lastError) {
                console.error('Error when capturing a tab ', chrome.runtime.lastError.message);
                return;
            }

日志结果为

Answer 1

我找到了答案。 问题是 - 如果您尝试从选项卡/窗口而不是弹出窗口捕获音频，那么您应该将 chrome.tabCapture.getMediaStreamId 与 navigator.mediaDevices.getUserMedia （使用 chromemediasource“选项卡”）一起使用。然后它就会起作用！