Отправка сообщения в фоновый скрипт

Question

Я пытаюсь реализовать веб-приложение для совместного использования экрана, которое будет использовать API DesktopCapture Chrome для отображения экрана пользователя на веб-странице. Я создал расширение Chrome, и в фоновом режиме работает прослушиватель событий. Моя проблема заключается в том, что когда я пытаюсь отправить сообщение с веб-страницы на расширение (чтобы получить идентификатор userMedia), я не получаю ничего на стороне расширения. Я также пытаюсь вернуть идентификатор getUserMedia обратно на веб-страницу для отображения канала. Я приложил то, что у меня есть. Спасибо

манифест

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

Answer 1

Вы не можете просто использовать обмен сообщениями так же, как вы используете его в скрипте контента из произвольного кода веб-страницы.

В документации доступно два руководства для взаимодействия с веб-страницами, которые соответствуют двум подходам: (externally_connectable) (пользовательские события со сценарием содержимого)

Предположим, вы хотите разрешить http://example.com отправить сообщение на ваш добавочный номер.

1. Вам нужно специально внести этот список в манифест:

     "externally_connectable" : {
       matches: [ "http://example.com" ]
     },
   

2. Вам необходимо получить постоянный добавочный ID. Предположим, что полученный идентификатор abcdefghijklmnoabcdefhijklmnoabc

3. Ваша веб-страница должна проверить, разрешено ли отправлять сообщение, а затем отправлять его с использованием предварительно определенного идентификатора:

   // 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 */
     }
   );