Skip to content

:electron: Control your Electron Browser Window securely from the renderer

License

Notifications You must be signed in to change notification settings

BetaHuhn/electron-window-controls

Repository files navigation

Electron Window Controls

Node CI Release CI GitHub David

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

❔ About

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

Donate via PayPal

ko-fi

📄 License

Copyright 2021 Maximilian Schiller

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