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);
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.
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.
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.
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.
You need to specifically whitelist that site in the manifest:
"externally_connectable" : {
matches: [ "http://example.com" ]
},
You need to obtain a permanent extension ID. Suppose the resulting ID is abcdefghijklmnoabcdefhijklmnoabc
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
);
}
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 */
}
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With