Full screen app with navigation bar

Hi all,
First of all, the electron concept is AMAZING! Well done to all the people contributing to it.

I am trying to build a full-screen/kiosk app that should be able to have a home page with buttons that would either launch local Windows/Linux apps or launch a browser window in which there will be loaded both local and various remote websites.
One of the features I got stuck on is: it should have a navigation bar at the top that should communicate with the main browser window to tell it to go back, forward, home, refresh etc. I attached an image of a rough idea about how it should look.

Here is what I tried:

  1. Dynamically adding the toolbar HTML code via JS in the renderer.js file and style it with a local CSS.
    That works up to the point when remote websites are loaded which obviously forbid the external CSS to load. I couldn’t manage to get the remote websites to accept the CSS.
  2. I tried to use a BrowserView positioned at the top of the browser window, but I could not find a way to communicate from the buttons now in the BrowserView to tell the main window to do the “back”, “forward” etc.
  3. I looked into using webview, but it seems to be deprecated as being unstable.

As a note, I used the “electron-quick-start” app as a starting point.
This is the code I use to open the main window:

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    fullscreen: true,
    frame: false,
    autoHideMenuBar: true,
    kiosk: true,
    skipTaskbar: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      webSecurity: false,
      devTools: true
    }
  })

I know there is the ipcRenderer module, but I had no luck making it send commands from the BrowserView to the main window.

I am looking forward to your thoughts.

Thank you very much for your time and support.

Hello @SomeDevWeb,

In your case I would use the ipcMain module in order to get a response from the main. The example in the link clearly show your how to do. If you don’t want to block your script, I would suggest you to use the asynchronous mathod.

BONUS:
If you only want to send from Main to Renderer, you can use the contents.send(channel, ...args) method with the given example.

Hope I helped.