Update external screen through primary screen


I am trying to create an app that uses an external screen and a primary screen.

Buttons on the primary screen will update the view on the secondary screen.

I have added jQuery to the primary view. The alert works.

<!-- index.html -->
<!-- ... -->
    window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');
      alert('button was clicked');

I want a click on the index page to update the text/display in secondary.html

<!-- secondary.html -->
    <div>Text to modify</div>

I edited the example hello world project from the home page

app.on('ready', function(){

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})

    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true

  mainWindow.on('closed', function () {
    mainWindow = null

function secondaryScreen() {
  mainWindow = new BrowserWindow({
    x: 300,
    y: 300

    pathname: path.join(__dirname, 'secondary.html'),
    protocol: 'file:',
    slashes: true

I’m unsure of how to link the 2 views to a “controller” js file.


After some digging I realized that this could be accomplished by number of ways.

Local storage, session storage and indexedDB

Also, another interesting way would be with ipcMain and ipcRenderer to communicate from the main process main.js - to the rendere process - webpage