javascript - tag - Enviar mensaje a script de fondo

script type= text/javascript src=

Question

Estoy tratando de implementar una aplicación web para compartir pantalla que utilizará la API de DesktopCapture Chrome para mostrar la pantalla de los usuarios en una página web. He creado la extensión de Chrome y tengo un detector de eventos ejecutándose en segundo plano. Mi problema es que cuando intento enviar un mensaje desde la página web a la extensión (para obtener el ID de userMedia) no recibo nada en el lado de la extensión. También estoy tratando de devolver la identificación getUserMedia a la página web para mostrar el feed. He adjuntado lo que tengo. Gracias

Manifiesto

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

No puede simplemente usar la mensajería de la misma manera que la usaría en una secuencia de comandos de contenido del código de una página web arbitraria.

Hay dos guías disponibles en la documentación para comunicarse con las páginas web, que corresponden a dos enfoques: (externally_connectable) (eventos personalizados con un script de contenido)

Suponga que desea permitir que http://example.com envíe un mensaje a su extensión.

1. Debe incluir específicamente en la lista blanca ese sitio en el manifiesto :

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

2. Necesita obtener una identificación de extensión permanente . Supongamos que la ID resultante es abcdefghijklmnoabcdefhijklmnoabc

3. Su página web necesita verificar si está permitido enviar un mensaje, luego envíelo usando la ID predefinida:

   // 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. Su extensión necesita escuchar mensajes externos y probablemente también verificar su origen:

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