ISSUE - kimhanui/vscode-Nyan-Cat GitHub Wiki

In my case: WSL2

C:\Users\김하늬\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\code\electron-browser\workbench\workbench.html

The reason (maybe)is...

WSL2에서 home dir

알게된 점!!

vscode extension의 소스 파일은 OS마다 조금씩 다른 경로에 저장되는데 WSL2를 쓰는 경우는,

패널 등 UI에 관한 extension은 윈도우에, 이벤트나 로직에 관한 건 리눅스에 설치한다는 것 같아 윈도우쪽만 봤었다.
그런데 Nyan cat의 경우 : 윈도우, 리눅스 둘 다에 설치돼있었다. (이게 가장 큰 수확)
WSL을 사용하면서 extension을 다운 받으면 아래 두 경로에 다 설치됨을 주의하면 될 것 같다.
윈도우: User/kimhanui/.vscode/extension/, 리눅스: ~/.vscode-server/extension/

그래서 지금까지 WSL2를 쓰면서 어떠한 이벤트도 받을 수 없었던게 수정돼야 할 부분들이 윈도우쪽 extension 소스에서만 수정돼서 그랬던 것 같다.

이 사진은 vscode 창 세개를 겹쳐서 하단의 status bar만 보이게 해 놓은 것인데, 아래서 부터 윈도우 경로의 extension소스의 창, 전자를 디버깅해서 띄운 테스트창(똑같이 윈도우 경로) WSL 경로의 extension소스의 창이다. 여기서 가장 위에 있는 창만 ( ^^ )표시가 없는 것을 볼 수 있다. 이는 extension소스를 윈도우쪽 경로에서만 수정해서 윈도우에서 연 vscode만 반영돼보인것이다. 즉, 리눅스 쪽 extension 소스도 수정한다면( ^^ )`을 볼 수 있다.

성공적으로 반영된 리눅스 쪽 vscode 창

여기서 알 수 있는 점은

패널 등 UI에 관한 extension은 윈도우에 설치하는 것이 아닌,
UI에 관한 것이든 아니든 설치하겠다고 선택한 OS에 따라 extension 소스가 추가되고 그 소스를 기반으로 extension이 적용된다는 것이다. (extension 설치할 때 로컬에 설치할건지 WSL2에 설치할건지 선택하게 나온다. 다 그런건 아님)

로컬에 설치하는 버튼만 있음

WSL에 설치하는 버튼만 있음
이제 작업해야할 공간을 알았다. 내 로컬에 설치한 extension을 수정하고싶으면 해당 OS의 extension 소스파일을 찾아가면되고, 내 경우는 WSL을 사용할 때 적용시킬 수 있어야하므로 리눅스 쪽 경로를 찾아가면 된다.

다시 돌아가서

이제 소스 내부에서 계속 의심중이었던 htmlDirPath를 찍어볼 수 있었다.
const htmlDirPath = path_1.normalize(${path_1.dirname(require.main.filename)}/vs/code/electron-browser/workbench);

로그로 찍어보니 위 값은
/home/kimhanui/.vscode-server/bin/08a217c4d27a02a5bcde898fd7981bda5b49391b/out/vs/code/electron-browser/workbench이었고
뒤에 붙은 /vs/code/electron-browser/workbench 는 윈도우 쪽에서 vscode를 설치하면서 생긴 경로로 보이는데
Nyan-cat의 개발자가 이 경로에 접근하려는 이유는 뭔가 UI를 수정하기 위함이었던 것 같다.

어쨋든 윈도우에서 직접 접근해서 찾을 수 있는 뒤에 /vs/code/electron-browser/workbench가 붙는 경로의 full path는
C:\Users\김하늬\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\code\electron-browser\workbench로

개발자가 ${path_1.dirname(require.main.filename)} 로 찾고자 했던 경로는 C:\Users\김하늬\AppData\Local\Programs\Microsoft VS Code\resources\app\out 였는데 로그로 찍어보니 뭔가 잘못 찾아가는 듯 했다. 여기서 전에 리눅스 경로에서 디버깅할 때 만난 에러메시지를 이해할 수 있었다.

ENOENT means “No such directory entry”
It's an abbreviation of Error NO ENTry (or Error NO ENTity), and can actually be used for more than files/directories. https://stackoverflow.com/questions/19902828/why-does-enoent-mean-no-such-file-or-directory
없는 경로임. 뭔가 잘못 찾아온게 맞는 것 같다.

Directly 도움되는 가이드

Nyan-cat의 키워드는 workbench 커스터마이징이었다.

vscode extending workbench: https://code.visualstudio.com/api/extension-capabilities/extending-workbench

이제 명령어 호출까진 잘 작동되니 Nyan Cat이 나타나지 않는 것만 알아보면 될 것 같아 css를 담당하는 nyan-cat.js 파일을 중단점을 찍어 살펴봤다.

workbench.js에서 문제 있는 부분

// add default trustedTypes-policy for logging and to workaround
// lib/platform limitations
window.trustedTypes?.createPolicy('default', {
	createHTML(value) {
		// see https://github.com/electron/electron/issues/27211
		// Electron webviews use a static innerHTML default value and
		// that isn't trusted. We use a default policy to check for the
		// exact value of that innerHTML-string and only allow that.
		if (value === '<!DOCTYPE html><style type="text/css">:host { display: flex; }</style>') { //<--여기서 에러나는 듯 하다
			return value;
		}

		throw new Error('UNTRUSTED html usage, default trusted types policy should NEVER be reached');
		// console.trace('UNTRUSTED html usage, default trusted types policy should NEVER be reached');
		// return value;
	}
});

<span>처리돼서 아직 비어있음

css 디버깅시엔 디버깅용 vscode 창 옆에 개발자 도구가 붙어서 띄워진다.

Ubuntu 18.04에서 디버깅 할 때!!

앞에 붙는 경로는 이랬다: /usr/share/code/resources/app/out

경로에 접근할 권한이 없다는 것 같아

$ cd /usr/share/code/resources/app/out/
$ sudo chown -R <user-name> <directory-name>

를 실행시켜주니 위 경고는 사라졌다.


<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*.vscode-webview-test.com; object-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https: ws:; font-src 'self' https: vscode-remote-resource:;">
		<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types default TrustedFunctionWorkaround ExtensionScripts amdLoader cellRendererEditorText defaultWorkerFactory diffEditorWidget domLineBreaksComputer editorViewLayer diffReview extensionHostWorker insane notebookOutputRenderer safeInnerHtml standaloneColorizer tokenizeToString webNestedWorkerExtensionHost webWorkerExtensionHost;">
	</head>
	<body aria-label="">
<script id="NyanCatConfiguration">window.NyanCatConfiguration = {"backgroundColor":"transparent","name":"bday"}</script>
</body>

	<!-- Init Bootstrap Helpers -->
	<script src="../../../../bootstrap.js"></script>
	<script src="../../../../vs/loader.js"></script>
	<script src="../../../../bootstrap-window.js"></script>

	<!-- Startup via workbench.js -->
	<script src="workbench.js"></script>
<script src="file:///home/kimhanui/.vscode-server/extensions/zhengrenzhe.nyan-cat-0.0.8/out/nyan-cat.js"></script>
</html>

https://code.visualstudio.com/api/references/extension-guidelines#progress-status-bar-item

디버깅을 해보다가 uncaught exception까지 포함해보니 .vscode-server/bin/(영문숫자조합긴이름)내부에서 loader.js(?)를 못 찾는 것 같았다.
vs code server에 문제가 있는거라면 wsl에서 vs code server를 다시 다운 받아보고자 기존 mv .vscode-server .vscode-server-old명령어로 dir 이름을 바꿔주고 code .명령어로 .vscode-server를 새로 만들어진걸 확인하고 .vscode-server-old는 지웠다.
참고로 .vscode-server내부에 extensions 경로는 직접 만들어줘야하는 것 같다...