javascript - 以编程方式调用选项卡捕获会引发异常

Question

我在 chrome 扩展的内容脚本中定义了一个监听器:

document.addEventListener("startRecording", function(data) {
    chrome.runtime.sendMessage({'action' : 'captureCurrentTab'});
});

并在我的extension.js中定义了一个函数:

chrome.runtime.onMessage.addListener(

function(request, sender, sendResponse) {
       if (request.action == "captureCurrentTab"){

        captureCurrentTab();
     }
 });

function captureCurrentTab() {

    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabCapture.capture(MediaStreamConstraint, handleCapture);
    });
}

var MediaStreamConstraint = {
            //audio: true,
            video: true,
            videoConstraints: {
                mandatory: {
                    chromeMediaSource: 'tab',
                    minWidth: 1920,
                    maxWidth: 1920,
                    minHeight: 1080,
                    maxHeight: 1080
                }
            }
        };

function handleCapture(stream) {

    console.log('content captured');
    console.log("Adding Stream: ", stream);

}

但是当我发送消息以从我的网络应用程序开始录制时，如下所示:

var event = document.createEvent('Event');
            event.initEvent('startRecording');
            document.dispatchEvent(event);

然后扩展抛出异常:

1) 响应 tabCapture.capture 时出错:MediaStream 是强制的。2)运行tabCapture.capture时未选中runtime.lastError:尚未为当前页面调用扩展(请参阅activeTab权限)。无法捕获 Chrome 页面。

以下是我提供的权限:

"permissions": [
    "tabCapture",
    "tabs",
    "activeTab",
    "http://*/*",
    "https://*/*" ,
    "http://localhost:1615/*"
  ]

但是当我单击扩展按钮并重复相同的过程(发送消息进行录制)时，一切正常。我不知道为什么每次都必须单击扩展按钮才能开始捕获屏幕。我怎样才能自动启动它？

我还为我的扩展定义了快捷键。当我在发送录音消息之前按下它们时，一切正常。但是当我从我的应用程序触发/模拟它们时，再次出现相同的异常。

请帮忙。

Answer 1

这里的问题是 Chrome 无法跟踪此事件是通过点击启动的这一事实。因此它没有被“调用”。

您应该在内容脚本代码/上下文中绑定(bind)一个 click 事件监听器，并直接从那里发送消息。我认为 Chrome 接受用户的调用就足够了。

<小时/>

或者，绕过内容脚本直接向扩展程序发送消息也可能有效。这可以通过 "externally_connectable" method 来实现(docs)。