Electron Tabbed

This is a sample app that demonstrates multiple windows and multiple tabs functionality in Electron. Tabbing functionality is provided by electron-tabs

Running

$ npm i
$ npm start

File Structure Overview

• tabs\ folder containing sample pages that are open within tabs
• windows\ folder with sample pages that are open as new windows
  • windows\main\ window displayed when app first starts and shows a menu with links to all tabs
  • windows\tabs\ window that contains all tabs that are opened from the main menu
• main.js main process of the application. Responsible for opening the windows and handling communication between the windows

Overall Approach

1. When the app first starts, a new window (window\main\index.html) is opened. The main window has a menu with three links. The links can reference other pages within this application (see Link 1 and Link 2) or link outside (see Link 3)
2. When a link is selected from the menu, the window requests the main process to open a new tab with the title and URL parameters.
3. The main process checks if a window with tabs already exists. If it does, it sends a message to the tabbed window to add a tab. If not, it first creates a tabbed window and then sends a message to it to add a tab.
4. The tabbed window listens for requests from the main process, and adds new tabs to the tab group when the new tab events are dispatched from the main process.