[Electron] Unable to install dev tools 문제

References

https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/776

https://qdmana.com/2022/04/202204101637436275.html

 

에러 발생 내역

(node:14468) ExtensionLoadWarning: Warnings loading extension at [ 일렉트론 Devtool이 적용되는 로컬 경로 ]\\[ ID 값 ]:

Unrecognized manifest key 'browser_action'.

Unrecognized manifest keyoad extension with file 'update_url'.

Cannot load extension with file or directory name *metadata.*

*Filenames starting with "_*" are reserved for use by the system.

(node:14468) UnhandledPromiseRejectionWarning: Error: ERR_FAILED (-2) loading '[<http://localhost:8080/>](<http://localhost:8080/>)' at rejectAndCleanup (electron/js2c/browser_init.js:225:1288) at WebContents.stopLoadingListener (electron/js2c/browser_init.js:225:1673) at WebContents.emit (events.js:228:7)

(node:14468) UnhandledPromiseRejectionWarning: Unhandled promise rejection.

This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)

(node:14468) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated.

In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

 

 

에러가 발생된 타임라인

• 기존에 있던 소스코드를 pull
• npm 모듈을 설치(npm install)
• 로컬 환경에서 electron 개발 환경을 구동(npm run electron:serve)
• 에러발생…

 

개발 환경

• node.js : 14.17.8
• npm : 6.14.15
• electron : 9.0.0
• vue.js : 3.0.0

 

해결 시도.1 (실패)

환경 설정 도중 문제가 발생할 가능성이 있으니 기존 소스코드를 지우고 다시 git에서 pull을 받아 진행한다.

 

해결 시도.2 (실패)

background.js에서 installExtension 인자 값의 id와 electron 버전을 직접 지정한다.

await installExtension({
  id: '[ ID 값 ]',
  electron: '[ 일렉트론 버전 ]'
})

 

해결 시도.3 (실패)

background.js에서 installExtension 인자 값의 id와 loadExtensionOption을 직접 지정한다.

await installExtension('[ ID 값 ]', {
    loadExtensionOptions: {
        allowFileAccess: true,
    },
});

 

해결 시도.4 (실패)

background.js에서 electron-devtools-installer 가 호출되는 VUEJS_DEVTOOLS 를 VUEJS3_DEVTOOLS로 변경한다.

import installExtension, { VUEJS3_DEVTOOLS } from "electron-devtools-installer";

... (아래의 installExtension에서도 VUEJS3_DEVTOOLS 변경 적용)

 

해결 시도.5 (실패)

package-lock.json 파일에서 변경사항을 방지하기 위해 기존 node_modules 파일을 지우고 다음과 같은 명령어를 통해 다시 인스톨해서 실행한다.

npm ci

... (설치 후 package-lock.json 파일에 변경사항이 없는 것을 확인)

npm run electron:serve

 

해결 시도.6 (실패)

extension 경로가 지정되어 있는 id 프로젝트에서 manifest.json 파일 내 update_url 와 browser_action 구문을 지우고 다시 실행한다.

{
// ------------- 삭제.1 ------------- //
"update_url": "<https://clients2.google.com/service/update2/crx>",
// -------------------------------- //

... (중략) ...

// ------------- 삭제.2 ------------- //
  "browser_action": {
    "default_icon": {
      "16": "icons/16-gray.png",
      "48": "icons/48-gray.png",
      "128": "icons/128-gray.png"
    },
    "default_title": "Vue Devtools",
    "default_popup": "popups/not-found.html"
  },
// -------------------------------- //

 ... (후략) ...

}

 

해결 시도.7 (실패)

Chrome 확장 프로그램 중 Vue Devtools 를 재설치한다.

 

해결 시도.8 (성공)

Windows 포맷을 한 다음 다시 재설치 후 진행한다.

 

문제 발생 원인

내부 보안 처리와 여러 복합적인 문제로 해당 electron 프로젝트를 구동하는 설정 파일이나 값이 변조가 된거 같다.

추후 비슷한 일이 다시 생길때 관련 항목으로 접근하여 조치를 하면 될 거 같다.