請求屏幕共享中的iframe

Question

我建立了一個Chrome擴展，成功地實現了支持WebRTC屏幕共享，但是存在其使用擴展到iframe中發揮作用的部位的要求。

有沒有可能做到這一點？我的代碼下面是一個例子 - 「未知」的情況下，總是當一個iframe中執行。

function getUserScreen(sources, extensionId) { 
    const request = { 
      type: 'getUserScreen', 
      sources: sources 
    }; 
    return new Promise((resolve, reject) => { 
     chrome.runtime.sendMessage(extensionId, request, response => { 
      switch (response && response.type) { 
       case 'success': 
        log('success!'); 
        resolve(response.streamId); 
        break; 
       case 'error': 
        log('error!'); 
        reject(new Error(error.message)); 
        break; 
       default: 
        log('unknown!'); 
        reject(new Error('Unknown response')); 
        break; 
      } 
     }); 
    }).then(streamId => { 
     return navigator.mediaDevices.getUserMedia({ 
      video: { 
       mandatory: { 
        chromeMediaSource: 'desktop', 
        chromeMediaSourceId: streamId, 
        maxWidth: window.screen.width, 
        maxHeight: window.screen.height       
       } 
      } 
     }); 
    }); 
} 

Answer 1

一種方法是使用message事件。隨着「信息」事件，一個IFrame可以使用與網頁進行通信，因此它也可以談，一個擴展可能在該網頁上執行任何內容腳本;這種方法是由谷歌推薦這裏看到：https://developer.chrome.com/extensions/content_scripts#host-page-communication

從iframe中，它會是這個樣子：

var msg = { type: "CUSTOM_FROM_IFRAME", data: "Say hi." }; 
parent.postMessage(msg, "*"); 

window.addEventListener("message", ev=>{ 
    if(ev.type == "CUSTOM_FROM_CONTENTSCRIPT") console.log("can proceed"); 
}); 

內容腳本：

window.addEventListener("message", ev=> 
{ 
    if(ev.type == "CUSTOM_FROM_IFRAME") 
    chrome.runtime.sendMessage({type: ev.type, data: ev.data}, response => { 
    myIFrame_element.contentWindow.postMessage({type: "CUSTOM_FROM_CONTENTSCRIPT", data: response.data}, "*"); }); 
}); 

而且從你的背景頁執行內容腳本代碼：

chrome.tabs.executeScript(mypgage_tab_id, {src: contentscript.js});