chrome screen share extenstion demo

background-script.js

// this background script is used to invoke desktopCapture API
// to capture screen-MediaStream.

var screenOptions = ['screen', 'window'];

chrome.runtime.onConnect.addListener(function (port) {
    port.onMessage.addListener(portOnMessageHanlder);
    
    // this one is called for each message from "content-script.js"
    function portOnMessageHanlder(message) {
        console.debug( 'message',message)
        if(!!message['get-custom-sourceId']) {
            screenOptions = message['get-custom-sourceId'];
            console.debug( screenOptions )
            chrome.desktopCapture.chooseDesktopMedia(screenOptions, port.sender.tab, onAccessApproved);
            return;
        }
        if(message == 'get-sourceId') {
            console.debug( screenOptions )
            chrome.desktopCapture.chooseDesktopMedia(screenOptions, port.sender.tab, onAccessApproved);
            return;
        }

        if(message == 'audio-plus-tab') {
            screenOptions = ['screen', 'window', 'audio', 'tab'];
            console.debug( screenOptions )
            chrome.desktopCapture.chooseDesktopMedia(screenOptions, port.sender.tab, onAccessApproved);
            return;
        }
        var options = message.replace(/\s+/gim,'').split(",");
        if( options.length > 0 ){
            screenOptions = options;
            console.debug( screenOptions )
            chrome.desktopCapture.chooseDesktopMedia(screenOptions, port.sender.tab, onAccessApproved);
        }
        return;
    
    }

    // on getting sourceId
    // "sourceId" will be empty if permission is denied.
    function onAccessApproved(sourceId, opts) {
        // if "cancel" button is clicked
        if(!sourceId || !sourceId.length) {
            return port.postMessage('PermissionDeniedError');
        }
        
        // "ok" button is clicked; share "sourceId" with the
        // content-script which will forward it to the webpage
        port.postMessage({
            sourceId: sourceId,
            canRequestAudioTrack: !!opts.canRequestAudioTrack
        });
    }
});

content-script.js

// this content-script plays role of medium to publish/subscribe messages from webpage to the background script

// this object is used to make sure our extension isn't conflicted with irrelevant messages!
var rtcmulticonnectionMessages = {
    'are-you-there': true,
    'get-sourceId':  true,
    'audio-plus-tab': true
};
var customMessages = ['screen', 'window', 'audio', 'tab'];
// this port connects with background script
var port = chrome.runtime.connect();

// if background script sent a message
port.onMessage.addListener(function (message) {
    // get message from background script and forward to the webpage
    window.postMessage(message, '*');
});

function checkCustomerValid( string ){
    if( !string  || typeof string !== 'string' ) return false;
    var arr = string.replace(/\s+/gim,"").split(',');
    var matchString = customMessages.join(',');
    var valid = true;
    arr.forEach(function(item){
        if( matchString.indexOf(item ) === -1){
            valid = false
        }
    })
    return valid;
}

// this event handler watches for messages sent from the webpage
// it receives those messages and forwards to background script
window.addEventListener('message', function (event) {
    // if invalid source
    if (event.source != window)
        return;

    if(!!event.data['get-custom-sourceId']) {
        // forward message to background script
        port.postMessage(event.data);
        return;
    }

    var valid = checkCustomerValid(event.data);
    // it is 3rd party message
    if(!rtcmulticonnectionMessages[event.data] && !valid) return;
        
    // if browser is asking whether extension is available
    if(event.data == 'are-you-there') {
        window.postMessage('rtcmulticonnection-extension-loaded', '*');
        return
    }

    // if it is something that need to be shared with background script
    if(event.data == 'get-sourceId' || event.data === 'audio-plus-tab') {
        // forward message to background script
        port.postMessage(event.data);
        return
    }
    if(valid) {
        // forward message to background script
        port.postMessage( event.data );
        return
    }
});

// inform browser that you're available!
window.postMessage('rtcmulticonnection-extension-loaded', '*');