[electron]chrome extension사용하기

electron 개발을 하면서 chrome에서 사용하는 개발자도구 확장 프로그램의 사용이 필요해졌다.

현재는 knockoutjs를 사용하기에 일단 그것에 초점을 맞추며, 나머지는 응용해서 하면 해결될 것이다.

 

사용 방법

1. electron-devtools-installer 패키지 설치
 - npm install electron-devtools-installer --save-dev

 

2. main process 코드에 import 하기 

const { default: installExtension, KNOCKOUTJS_DEVTOOLS} = require('electron-devtools-installer')

...
...

//앱 준비 되었을 시 화면 출력 담당
app.whenReady().then(async () => {

    installExtension(KNOCKOUTJS_DEVTOOLS)
        .then((name) => console.log(`Added Extension: ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
	...
    ...
    
});

3. electron-devtools-installer에 KNOCKOUTJS 추가하기
 - electron-devtools-installer가 설치된 node_modules/electron-devtools-installer/dist/index.js 파일의 제일 하단 부분

exports.KNOCKOUTJS_DEVTOOLS = {
    id: 'oddcpmchholgcjgjdnfjmildmlielhof',
    electron: '>=1.2.1'
}

 

3번 때문에 많이 헤메게 되었으며, 실행 시 터미널에 에러는 출력되는데 잘 동작하는듯 하다.(원인은 아직 파악 못함)

id에 들어가는 값은 크롬 확장프로그램에 나타나는 아이디값이며 knockoutjs의 경우 다음과 같다.

chrome://extensions/?id=oddcpmchholgcjgjdnfjmildmlielhof

참고 사이트

https://github.com/MarshallOfSound/electron-devtools-installer

GitHub - MarshallOfSound/electron-devtools-installer: An easy way to ensure Chrome DevTools extensions into Electron

https://stackoverflow.com/questions/45199355/how-to-use-electron-devtools-installer

How to use electron-devtools-installer?