从 chrome 扩展打开的窗口在活动面板中捕获屏幕答案

【问题标题】：capture screen in active panel from window opened from chrome extension从 chrome 扩展打开的窗口在活动面板中捕获屏幕
【发布时间】：2015-03-03 13:11:58
【问题描述】：

我创建了一个页面事件 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
});
    }

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

好吧..我得到了一个简单的解决方案，我想与其他用户分享这个问题的不同方法：

就我而言，弹出窗口中有一个“启动窗口”按钮，新窗口中有一个“初始化捕获”和“捕获帧”按钮。因此，我没有弄乱权限，而是从新窗口中删除了“初始化捕获”按钮，并将该代码放在弹出“启动窗口”按钮的相同处理程序中，以这种方式绕过安全限制。
我在后台页面中保留了一个隐藏的画布和视频标签，这就是真正的捕获发生的地方。当用户在新窗口上按下“捕获框架”时，它只是向后台页面发送一条消息，该页面通过回调返回画布的内容。

【讨论】：