Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
like image 932
bigC5012 Avatar asked Sep 28 '14 23:09

bigC5012


People also ask

How do I send a message to content script?

To send a message to a content script, use chrome. tabs. sendMessage and specify the TabId . The message will be sent to the content script running in that tab.

How can background scripts & Content scripts communicate?

Communication between extensions and their content scripts works by using message passing. Either side can listen for messages sent from the other end, and respond on the same channel.

What is the difference between content script and background script?

Background Script - Provides persistence and handles background events. Content Script - Scripts that run in isolation in the context of the web page. Injected Script - Scripts that are programmatically injected into the web page.


1 Answers

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 */
      }
    );
    
like image 85
Xan Avatar answered Oct 16 '22 04:10

Xan