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

  • Android browser touch event location
  • Chrome - Difference between event time in devtools timeline and performance timing API
  • Force DOM element in “inspected mode”
  • controlling css with javascript works with Mozilla & Chrome but not IE
  • Communication JQuery and C#
  • Is there a way to control the Progress bar on Chrome app?
  • {
    "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);
    

  • Chrome devtools not logging “undefined” anymore?
  • $x() function is not defined inside a Chrome extension, content script
  • Bug in chrome with ckeditor editing links
  • Chromium extensions: How to run a content_script after all the document's listeners are triggered?
  • Can I fire up a Chrome extension API from code?
  • Remove injected script in chrome extension
  • One Solution collect form web for “Sending message to background script”

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