2

웹 페이지에 사용자 화면을 표시하기 위해 desktopCapture Chrome API를 사용할 화면 공유 웹 응용 프로그램을 구현하려고합니다. Chrome 확장 프로그램을 만들고 이벤트 리스너를 백그라운드에서 실행하고 있습니다. 내 문제는 내가 웹 페이지에서 확장 기능 (userMedia ID를 얻기 위해)으로 메시지를 보내려고 할 때입니다. 확장자 측면에서 아무 것도받지 못했습니다. 피드를 표시하기 위해 getUserMedia id를 다시 웹 페이지로 반환하려고합니다. 나는 내가 가지고있는 것을 첨부했다. 감사합니다백그라운드 스크립트에 메시지 보내기

매니페스트

{ 
"name": "Class Mate Manifest", 
"description": "Extension that allows for user to share their screen", 
"version": "1", 
"manifest_version": 2, 

"background": { 
    "scripts": ["background.js"] 
}, 
"permissions": [ 
"desktopCapture", 
"tabs" 
], 
"browser_action": { 
    "default_icon": "icon.png", 
"default_popup": "index.html" 
    } 
} 

background.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) { 
console.log(request.greeting); 
if(request.greeting == yes){ 
chrome.desktopCapture.chooseDesktopMedia(["screen", "window"], sendResponse); 
return true; 
} 
}); 

webpage.js

function gotStream(stream) { 
console.log("Received local stream"); 
var video = document.querySelector("video"); 
video.src = URL.createObjectURL(stream); 
localstream = stream; 
// stream.onended = function() { console.log("Ended"); }; 
} 

function getUserMediaError() { 
console.log("getUserMedia() failed."); 
} 

function onAccessApproved(id) { 
console.log(id); 
if (!id) { 
console.log("Access rejected."); 
return; 
} 


navigator.webkitGetUserMedia({ 
    audio:false, 
    video: { mandatory: { chromeMediaSource: "desktop", chromeMediaSourceId: id } } 
}, gotStream, getUserMediaError); 

} 


chrome.runtime.sendMessage({greeting: "yes"}, onAccessApproved); 

답변

6

당신은 단순히 당신이에서 콘텐츠 스크립트에서 사용하는 것과 같은 방법으로 메시징 사용할 수 없습니다 임의의 웹 페이지 코드.

이 두 가지 접근 방식에 해당 웹 페이지와 통신에 대한 문서에서 사용할 수있는 가이드가 있습니다 (externally_connectable)(custom events with a content script)

당신이 http://example.com이 확장에 메시지를 보낼 수 있도록한다고 가정가.

  1. 당신은 특히 매니페스트에서 해당 사이트를 허용 목록에 추가해야합니다

    "externally_connectable" : { 
        matches: [ "http://example.com" ] 
        }, 
    
  2. 당신은 obtain a permanent extension ID해야합니다. 결과 ID가 abcdefghijklmnoabcdefhijklmnoabc

  3. 가정 해 당신의 다음,이 메시지를 보낼 수있어 확인 미리 정의 된 ID 사용하여 전송해야웹 페이지 : 듣고 요구를

    // Website code 
    // This will only be true if some extension allowed the page to connect 
    if(chrome && chrome.runtime && chrome.runtime.sendMessage) { 
        chrome.runtime.sendMessage(
        "abcdefghijklmnoabcdefhijklmnoabc", 
        {greeting: "yes"}, 
        onAccessApproved 
    ); 
    } 
    
  4. 귀하의 확장 외부 메시지를 확인하고 해당 원인을 확인하십시오.

    // Extension's background code 
    chrome.runtime.onMessageExternal.addListener(
        function(request, sender, sendResponse) { 
        if(!validate(request.sender)) // Check the URL with a custom function 
         return; 
        /* do work */ 
        } 
    ); 
    
+0

네, 맞았습니다. 내가 언급 한 외부 연결 방식을 사용하여 웹 페이지에서 메시지를 보낼 수있었습니다. 하지만 일단 메시지를 보내면 확장은 메시지를 제대로 받지만 콜백 함수를 통해 아무 것도 보내지 않습니다. 따라서 내 크롬 확장 프로그램은 화면 공유에 사용할 ID를 다시 전송하는 것으로 가정합니다. 하지만 웹 페이지 쪽에서는 콜백 메소드가 실행되지 않습니다. 이견있는 사람? – bigC5012

+0

그래서 나는 이전의 코멘트에서 나의 실수를 고쳤습니다. 이제 웹 페이지가 메시지를 내선 번호로 전송합니다. 확장 프로그램은 메시지를 수신하고 사용자가 캡처 할 화면을 묻습니다. 그런 다음 background.js 파일은 올바른 ID를 웹 페이지에 보냅니다. 일단 내 웹 페이지가 onAccessAproved를 실행하면 비디오 스트림을로드하지 못하고 getUserMediaError 함수를 실행합니다. 콘솔에 오류를 인쇄하고 NavigateUserMediaError라고 표시합니다. 이 오류가 무엇을 의미하는지 또는 내 코드에서 무엇이 잘못 되었는 지 알 수 없습니까? – bigC5012

+0

나는 그것에 대해 새로운 질문을 던질 것이다. – Xan