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

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);

}

但是当我发送消息以从我的Web应用程序开始记录时，像这样：

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无法跟踪该事件是通过单击启动的。 因此，它不是“调用”的。

您应该在内容脚本代码/上下文中绑定click事件侦听器，然后直接从那里发送消息。 我认为Chrome足以接受用户的调用。

---

或者，可以绕过内容脚本直接向扩展名发送消息。 这可以通过"externally_connectable"方法 （ docs ）实现。