Electron Window Controls

Control your Electron Browser Window securely from the renderer

👋 Introduction

electron-window-controls lets you control your Electron app's BrowserWindow directly from the renderer process itself. It uses IPC communication to do this securely without the use of the remote module. Once it's initialized in the main process, it can be used in any renderer process and it will figure out which BrowserWindow you want to control automatically.

🚀 Get started

npm install electron-window-controls

Tested with Electron 11 or later

📚 Usage

To use electron-window-controls, simply inititalize it in the Electron main process:

import WindowControls from 'electron-window-controls'

WindowControls.initMain()

And you are done! 🎉

After that you can use the provided methods in the renderer:

import { BrowserWindow } from 'electron-window-controls'

BrowserWindow.minimize()

BrowserWindow.toggleMaximize()

BrowserWindow.close()

electron-window-controls will control the BrowserWindow from which it was called.

⚙️ Options

You can also pass an options object to .initMain() or new WindowControls() to customize the behaviour of electron-window-controls further:

WindowControls.initMain({
	// options...
})

Here are all the options electron-window-controls supports:

Name	Type	Description	Default
isMaximized	boolean	The initial window state	false

📖 Examples

Here are a few examples to help you get started!

Basic Example

Main process:

import WindowControls from 'electron-window-controls'

WindowControls.initMain()

Renderer process:

import { BrowserWindow } from 'electron-window-controls'

BrowserWindow.minimize()

BrowserWindow.toggleMaximize()

BrowserWindow.close()

---

Custom Titlebar with Vue

You might want to add a custom titlebar to your Electron app. This can be achived pretty easy with electron-window-controls and Vue.js:

Main process:

import { BrowserWindow } from 'electron'
import WindowControls from 'electron-window-controls'

const win = new BrowserWindow({
	frame: false // Hide the default application frame
})

// Load the Vue app
win.loadURL('app://./index.html')

// Initialize electron-window-controls
WindowControls.initMain()

Vue renderer:

<template>
  <!-- Your titlebar -->
  <div class="controls">
	<button @click="minimize">Min</button>
	<button @click="toggleMaximize">Max</button>
	<button @click="close">Close</button>
  </div>
</template>

<script>
import { BrowserWindow } from 'electron-window-controls'

export default {
	methods: {
		minimize() {
			BrowserWindow.minimize()
		},
		toggleMaximize() {
			BrowserWindow.toggleMaximize()
		},
		close() {
			BrowserWindow.close()
		}
	}
}
</script>

---

💻 Development

Issues and PRs are very welcome!

• run yarn lint or npm run lint to run eslint.
• run yarn watch or npm run watch to watch for changes.
• run yarn build or npm run build to produce a compiled version in the lib folder.

To Do

• Add more of Electron BrowserWindow's methods

❔ About

This project was developed by me (@betahuhn) in my free time. If you want to support me:

📄 License

Copyright 2021 Maximilian Schiller

This project is licensed under the MIT License - see the LICENSE file for details.