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);
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 Answer
Reset to default 14You 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 municating with webpages, which correspond to two approaches: (externally_connectable) (custom events with a content script)
Suppose you want to allow http://example. to send a message to your extension.
You need to specifically whitelist that site in the manifest:
"externally_connectable" : { "matches": [ "*://*.example./*" ] },You need to obtain a permanent extension ID. Suppose the resulting ID is
abcdefghijklmnoabcdefhijklmnoabcYour 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 */ } );