[ electron ] 구현 : 내 맘대로 menu bar

electron에는 기본적으로 제공되는 menu bar가 있습니다. 

저는 electron 단축키에 새로운 단축키를 추가하고 싶어 menu를 없애습니다. 그렇게 하니 자연스럽게 electron의 단축키도 동작하지 않았습니다. 하지만, 일렉트론의 zoomIn과 zoomOut, reload 기능이 필요해졌습니다.  그래서 menu bar의 일부기능만 사용하는 menu bar를 만들고자 하였습니다. 

구현 목표

내가 필요한 menu/단축키를 제외한 electron menu/단축키를 삭제하여 나의 단축키를 실행시키다.

 

시도 1

menu bar를 삭제한 상태에서 zoomIn, zoomOut 단축키를 페이지 어디서든 인식할 수 있게 구현하고자 하였습니다. 

첫번째, 페이지 어디서든 단축키를 인식할 수 있게 globalShortCut을 사용했습니다.

globalShorCut은 전역 단축키라고 생각하면 쉽습니다. 만약 textarea에 keydown이벤트를 이용해서 단축키를 구현해도 그 페이지에서만 단축키가 동작할 것입니다. 이를 위한 것이 globalShortCut입니다. 아래는 일렉트론 공식문서의 globalShortCut 입니다. (모든 페이지에 단축키를 정의하기보다느느 globalShortCut을 추천합니다. 한 곳에서만 코드를 작성하는 것이 수정, 관리에 유용합니다.)

www.electronjs.org/docs/api/global-shortcut

globalShortcut | Electron

두 번째, zoomIn, zoomOut을 위해 webFrame 함수를 사용하였습니다. 

webFrame은 electron의 zoomIn, zoomOut을 할 수 있게 해주는 함수입니다. 아래는 일렉트론 공식문서의 webFrame입니다. 

www.electronjs.org/docs/api/web-frame#methods

webFrame | Electron

하지만, 여기서 문제가 발생했습니다. 

globalShortCut을 선언하기 위해서는 window가 선언될 때 같이 선언해줘야되는데, webFrame의 경우, 랜더링이 된 페이지의 zoomIn/Out를 담당하는 함수이기 때문에 window가 선언될 때, 사용할 수 없었습니다. 

이 방법은 각 함수의 특성을 고려하지 못한 잘못된 방법이었습니다. 

 

시도 2. 

electron의 일부 단축키를 사용하기 위해서 menu bar를 편집해서 사용하는 것입니다.

template을 만들어서 원하는 기능만 넣어서 새로운 menu bar를 제작했습니다. 여기서 template은 options의 리스트입니다. options란, menuItem을 말합니다. menuItem의 종류는 아래의 게시글을 참고하십시오. 

www.electronjs.org/docs/api/menu-item

MenuItem | Electron

이 방법은 성공적이었습니다. 

아래는 저의 코드입니다. 

 win = new BrowserWindow({
    width: 950,
    height: 700,
    autoHideMenuBar: true, //menubar 숨기기
  });
  const templete=[
    {
      label: 'edit',
      submenu:[
        {
          role:'zoomIn',
          accelerator: 'CommandOrControl+='
        },
        {
          role:'zoomOut'
        },
        {
          role:'reload'
        }
      ]
    }
  ];
  let newMenu= Menu.buildFromTemplate(templete);

  Menu.setApplicationMenu(newMenu);

zoomIn의 경우, role:'zoomIn'만으로는 작동하지 않습니다. accelerator도 추가해줘야합니다.