[Electron] windows frame 커스터마이징

References

https://kentakang.com/137

https://codegear.tistory.com/20

https://kay0426.tistory.com/18

 

개요

일렉트론에서 기본적으로 제공하는 타이틀 바 대신 이를 커스터마이징 하는 방법을 기술한다.

단, 본 문서에는 Vue3(vue-cli-service) + Electron 환경임을 감안하고 작성한다.

 

window frame 컨트롤 커스텀

일렉트론이 설정되어 있는 background.js의 createWindow 함수에서 frame:false를 추가하여 디폴트 타이틀 바를 비활성화 한다.

const createWindow = () => {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
		
		...

		frame: false,
		
		...

	});
};

타이틀 바를 커스터마이징 하기 위한 코드들을 별도의 파일에 작성한다.

const { ipcRenderer } = require('electron');
const ipc = ipcRenderer;

var btnMin = document.getElementById("min"); // 최소화
var btnMax = document.getElementById("max"); // 최대화
var btnClose = document.getElementById("close"); // 닫기

btnMin.addEventListener("click", ()=>{
	ipc.send('minimizeApp');
});
btnMax.addEventListener("click", ()=>{
	ipc.send('maximizeApp');
});
btnClose.addEventListener("click", ()=>{
	ipc.send('closeApp');
});

background.js에 ipcMain을 확인 후, 없으면 추가한다.

const { app, BrowserWindow, ipcMain } = require('electron');

...

const ipc = ipcMain;

background.js의 createWindow 함수에 callback 함수를 추가한다.

ipc.on('minimizeApp', ()=>{
	mainWindow.minimize();
})

ipc.on('maximizeApp', ()=>{
	if(mainWindow.isMaximized()){
		mainWindow.restore();
	} else {
		mainWindow.maximize();
	}
})

ipc.on('closeApp', ()=>{
	mainWindow.close();
})

터미널에 npm run electron:serve 혹은 npm run serve 명령어로 정상적인 구동이 되는지 확인한다.

npm run electron:serve

// … 이후 별다른 에러없이 정상적으로 뜨는지 확인한다.

 

window frame 메뉴 커스텀

App.vue에 window.Menu 클래스를 이용하여 메뉴들을 커스텀한다.

const menu = new window.Menu()

// 메뉴 구성요소들을 추가한다
menu.append(new window.MenuItem({
  label: '도구',
  submenu: [
    {
      label: '새로고침', // 화면 상에 보이는 UI
      accelerator: 'Ctrl+R', // 단축키 설정
      click (focusedWindow) { // 클릭 이벤트 처리
        if (focusedWindow) focusedWindow.reload()
      }
    },
    {
      type: 'separator' // 구분선 UI
    },
    {
      label: '전체 화면',
      role: 'togglefullscreen'
    }
  ]
}))

window.titleBar에 커스텀한 메뉴 항목들을 반영한다.

window.titleBar.updateMenu(menu)