Sending message to background script

问题

I am trying to implement a screen sharing web application that will use the desktopCapture Chrome API to display the users screen on a web page. I have created the chrome extension and have an event listener running in the background. My problem is when I try to send a message from the web page to the extension (to get the userMedia id) I am not receiving anything on the extension side. I am also trying to return the getUserMedia id back to the webpage to display the feed. I have attached what I have. Thanks

Manifest

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

回答1:

You cannot simply use messaging the same way you would use it in a content script from an arbitrary webpage's code.

There are two guides available in the documentation for communicating with webpages, which correspond to two approaches: (externally_connectable) (custom events with a content script)

Suppose you want to allow http://example.com to send a message to your extension.

1. You need to specifically whitelist that site in the manifest:

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

2. You need to obtain a permanent extension ID. Suppose the resulting ID is abcdefghijklmnoabcdefhijklmnoabc

3. Your webpage needs to check it's allowed to send a message, then send it using the pre-defined 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. Your extension needs to listen to external messages and probably also check their origin:

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

来源：https://stackoverflow.com/questions/26090563/sending-message-to-background-script