从Chrome扩展程序打开的窗口中捕获活动面板中的屏幕

时间:2015-03-03 13:11:59

标签: javascript google-chrome-extension

我创建了一个页面事件google-chrome-extension,在按下扩展程序弹出窗口上的按钮时会创建一个新窗口。我不想通过按下新窗口中的按钮从活动面板中截取屏幕截图。我这样做是通过向后台页面发送消息来进行捕获,但我总是收到此错误:

  

运行tabCapture.capture时未经检查的runtime.lastError:   尚未为当前页面调用扩展(请参阅activeTab   允许)。无法捕获Chrome页面

如果我理解正确,那么捕获应该由扩展弹出窗口或活动面板中的用户操作直接启动。有一些设置方法,以便接受扩展内容页面中的点击在当前页面中生成?

----清单------

"background" : {
    "page": "background.html",
    "persistent": false
  },
  "page_action" :{
    "default_popup": "popup.html" },
  "permissions": ["activeTab",  "declarativeContent",  "tabCapture",  "background"], 

----------- -------- background.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.command === "init_capture"){
      locate_tab(function(){
        init_capture();
      });

function init_capture(e){

    video = document.querySelector('video');
      canvas = document.querySelector('canvas');
      ctx = canvas.getContext('2d');

      var MediaStreamConstraint = {
            //audio: true,
            video: true,
            videoConstraints: {
                mandatory: {
                    chromeMediaSource: 'tab',
                    minWidth: 640,
                    maxWidth: 800,
                    minHeight: 420,
                    maxHeight: 600
                }
            }
      };

           chrome.tabCapture.capture(MediaStreamConstraint, function(stream){ 
console.log(stream); //always null.. activeTab error
});
    }

1 个答案:

答案 0 :(得分:0)

嗯..我得到了一个简单的解决方案,我希望与其他用户分享不同的方法来分享这个问题:

  1. 在我的情况下,我有一个"启动窗口"弹出窗口中的按钮,以及" init capture"和#34;捕捉帧"新窗口中的按钮。 因此,我没有删除权限,而是删除了" init capture"来自新窗口的按钮,并将该代码放在弹出窗口#34;启动窗口的相同处理程序中。按钮,以这种方式绕过安全限制。

  2. 我在后台页面中保留了隐藏的画布和视频标签,这就是真正的捕捉发生的地方。当用户按下"捕获帧"在新窗口中,它只是向后台页面发送一条消息,该页面通过回调返回画布的内容。