electron.js
function simpleSelector(sources, callback) {

  var options = crel('select', {
    style: 'margin: 0.5rem'
  }, sources.map(function(source) {
    return crel('option', {id: source.id, value: source.id}, source.name);
  }));

  var selector = crel('div',
    {
      style: 'position: absolute; padding: 1rem; z-index: 999999; background: #ffffff; width: 100%; font-family: \'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif; box-shadow: 0px 2px 4px #dddddd;'
    },
    crel('label', { style: 'margin: 0.5rem' }, 'Share screen:'),
    options,
    crel('span', { style: 'margin: 0.5rem; display: inline-block' },
      button('Share', function() {
        close();
        var selected = sources.filter(function(source) {
          return source && source.id === options.value;
        })[0];
        return callback(null, options.value, { title: selected.name });
      }),
      button('Cancel', close)
    )
  );

  function button(text, fn) {
    var button = crel('button', {
      style: 'background: #555555; color: #ffffff; padding: 0.5rem 1rem; margin: 0rem 0.2rem;'
    }, text);
    button.addEventListener('click', fn);
    return button;
  }

  function close() {
    document.body.removeChild(selector);
  }

  document.body.appendChild(selector);
}
function simpleSelector(sources, callback) {

  var options = crel('select', {
    style: 'margin: 0.5rem'
  }, sources.map(function(source) {
    return crel('option', {id: source.id, value: source.id}, source.name);
  }));

  var selector = crel('div',
    {
      style: 'position: absolute; padding: 1rem; z-index: 999999; background: #ffffff; width: 100%; font-family: \'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif; box-shadow: 0px 2px 4px #dddddd;'
    },
    crel('label', { style: 'margin: 0.5rem' }, 'Share screen:'),
    options,
    crel('span', { style: 'margin: 0.5rem; display: inline-block' },
      button('Share', function() {
        close();
        var selected = sources.filter(function(source) {
          return source && source.id === options.value;
        })[0];
        return callback(null, options.value, { title: selected.name });
      }),
      button('Cancel', close)
    )
  );

  function button(text, fn) {
    var button = crel('button', {
      style: 'background: #555555; color: #ffffff; padding: 0.5rem 1rem; margin: 0rem 0.2rem;'
    }, text);
    button.addEventListener('click', fn);
    return button;
  }

  function close() {
    document.body.removeChild(selector);
  }

  document.body.appendChild(selector);
}
function simpleSelector ( sources , callback ) { var options = crel ( 'select' , { style : 'margin: 0.5rem' } , sources . map ( function ( source ) { return crel ( 'option' , { id : source . id , value : source . id } , source . name ) ; } ) ) ; var selector = crel ( 'div' , { style : 'position: absolute; padding: 1rem; z-index: 999999; background: #ffffff; width: 100%; font-family: \'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif; box-shadow: 0px 2px 4px #dddddd;' } , crel ( 'label' , { style : 'margin: 0.5rem' } , 'Share screen:' ) , options , crel ( 'span' , { style : 'margin: 0.5rem; display: inline-block' } , button ( 'Share' , function ( ) { close ( ) ; var selected = sources . filter ( function ( source ) { return source && source . id === options . value ; } ) [ 0 ] ; return callback ( null , options . value , { title : selected . name } ) ; } ) , button ( 'Cancel' , close ) ) ) ; function button ( text , fn ) { var button = crel ( 'button' , { style : 'background: #555555; color: #ffffff; padding: 0.5rem 1rem; margin: 0rem 0.2rem;' } , text ) ; button . addEventListener ( 'click' , fn ) ; return button ; } function close ( ) { document . body . removeChild ( selector ) ; } document . body . appendChild ( selector ) ; }
This is just a simple default screen selector implementation
This is just a simple default screen selector implementation