@canwdev/electron-window-manager
v0.1.8
Published
Manage multiple electron windows, message transfer and sync state.
Downloads
15
Readme
Electron Window Manager
Manage multiple electron windows, message transfer and sync state.
Tested in "electron": "^10.3.0"
Features
- Create customized windows
- Use
preload.js
, you can maximize, minimize, switch, or call any window methods in render process withnodeIntegration: false
- Message transfer between windows
- State sync between windows
Usage
Demos and examples are in this project: electron-multiple-window-demo
1. Install
npm i @canwdev/electron-window-manager
# Or yarn add @canwdev/electron-window-manager
2. Setup preload.js
Import our preload.js
to electron-api.js
// src/utils/electron-api.js
const wmPreload = require('@canwdev/electron-window-manager/preload')
module.exports = {
...wmPreload,
// Write your APIs here
}
Create your preload files and import electron-api.js
:
preload.js
: fornodeIntegration: false
andcontextIsolation: true
preload-node.js
: fornodeIntegration: true
// src/preload.js
const {contextBridge} = require('electron')
const electronAPI = require('./utils/electron-api')
contextBridge.exposeInMainWorld(
"electronAPI", electronAPI
);
// src/preload-node.js
const electronAPI = require('./utils/electron-api')
window.electronAPI = electronAPI
console.log('electronAPI loaded', electronAPI)
3. Setup main process
Create a global window manager instance run in main process
// src/utils/wm.js
const WindowManager = require('@canwdev/electron-window-manager')
const path = require('path')
const wm = new WindowManager({
// setup preload path
preloadDir: path.join(__dirname, '../')
})
module.exports = wm
Import in main process
// src/main.js
const wm = require('./utils/wm')
// Create a window
wm.createWindow({
width: 800,
height: 600,
minWidth: 800,
minHeight: 600,
frame: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
},
customConfig: {
isOpenDevTools: isDev,
saveWindowStateName: 'mainWindow',
}
},
`http://localhost:3000`
)