vscode extension 수정하기 (genie-ai)

목차

---

개요

Genie AI - vscode 해당 확장의 내용을 조금 수정하고 싶었다.

Genie AI panel로 Focus를 맞출 시 현재는 자동으로 입력창에 Focus가 가지 않아 키보드 단축키를 주로 이용하는 나에게 상당히 거슬리게 다가왔다. 소스를 수정해 리패키징을 하려고 Github Repository에 들어가보니 소스는 업로드되어있지 않았다.

따라서 최후의 방법으로 현재 설치되어진 소스를 수정하기로 결심했다.

수정

맥 기준으로 extension의 javascript 소스는 다음 경로에 위치한다.

$HOME/.vscode/extensions/genieai.chatgpt-vscode-(version)/out

해당 경로에 들어가보면 extension.js 파일과 web/main.js 파일이 존재할 것이다.
우리가 수정해야 할 파일은 해당 2개의 파일이다.

chatgpt-vscode.conversationView 명령어를 생성 및 지정하는 부분을 찾아서 함수이름을 수정한다.
나는 tglOneShotView 로 수정했다.

- E=Ct.commands.registerCommand("chatgpt-vscode.conversationView",()=>{a.toggleOneShotView(!0)})
+ E=Ct.commands.registerCommand("chatgpt-vscode.conversationView",()=>{a.tglOneShotView(!0)})

그리고 extensions.js에서 toggleOneShotView 함수를 찾아서 함수 내용을 그대로 복사해준다.

toggleOneShotView(a=!1){if(!this?.webView?.webview)return;let t=this.context.globalState.get("genieai-oneshot-visible");a&&(t=!t,this.context.globalState.update("genieai-oneshot-visible",t)),this.isOneShotVisible=t,this.sendMessage({type:"toggleOneShot",visible:t}),tt.commands.executeCommand("setContext","chatgpt-vscode.editor-view",this.isOneShotVisible),this.webView.title="Conversation view"}

그리고 내용을 그대로 복사 + 붙여넣기한 뒤 함수이름을 tglOneShotView 로 수정해준다.
this.sendMessage({type:"toggleOneShot",visible:t}) 부분의 toggleOneShot 부분을 tglOneShot 으로 수정해준다.

함수를 굳이 하나를 더 만들어 수정하는 이유는 toggleOneShotView 함수를 생각보다 참조하는 곳이 많아 해당 함수를 건드리면 혹여나 잘못된 동작을 야기할 수 있을 것 같아 안전하게 함수를 새로 하나 더 만들게 되었다.

tglOneShotView(a=!1){if(!this?.webView?.webview)return;let t=this.context.globalState.get("genieai-oneshot-visible");a&&(t=!t,this.context.globalState.update("genieai-oneshot-visible",t)),this.isOneShotVisible=t,this.sendMessage({type:"tglOneShot",visible:t}),tt.commands.executeCommand("setContext","chatgpt-vscode.editor-view",this.isOneShotVisible),this.isOneShotVisible?this.webView.title="Editor view":this.webView.title="Conversation view"}

web/main.js 파일에서 case"toggleOneShot": 부분을 찾아서 내용을 모두 복사한다.
toggleOneShot 부분은 이름 그대로 oneshot-question-wrapper 부분과 conversational-wrapper 부분을 toggle 해주는 부분이다.

case"toggleOneShot":d.visible?(document.getElementById("oneshot-question-wrapper").classList.remove("hidden"),document.getElementById("conversational-wrapper").classList.add("hidden")):(document.getElementById("oneshot-question-wrapper").classList.add("hidden"),document.getElementById("conversational-wrapper").classList.remove("hidden"));break;

우리는 conversationView 명령어에서 conversation-wrapper 부분만 보여주면 되기 때문에 삼항연산자 내용을 수정한다.

이 때 우리는 genie AI panel에 질문할 input-box의 아이디를 구해 focus시켜야 하므로 vscode 내 개발자 도구를 열고 해당 부분을 찾아야 한다.
내가 찾은 내용으로는 다음과 같다. 즉 question-input 이다.

<textarea type="text" rows="1" id="question-input" placeholder="Ask a question..." oninput="this.parentNode.dataset.replicatedValue = this.value"></textarea>

우리는 따라서 document.getElementById("question-input").focus() 를 추가해주면 되는 것이다.

삼항연산자 내용 수정 버전

case"tglOneShot":d.visible?(document.getElementById("question-input").focus()):(document.getElementById("oneshot-question-wrapper").classList.add("hidden"),document.getElementById("conversational-wrapper").classList.remove("hidden"),document.getElementById("question-input").focus());break;

multi-command 확장을 설치하고
keybindings.json 에 다음과 같은 내용을 추가하였다.

{
  {
    "key": "ctrl+cmd+b",
    "command": "extension.multiCommand.execute",
    "args": {
        "sequence": [
            // "workbench.view.extension.chatgpt-vscode-view-container"
            "chatgpt-vscode.view.focus",
            "chatgpt-vscode.conversationView"
        ]
    },
  },
}

ctrl + cmd + b 키를 누르면 자동으로 chatgpt-vscode panel이 보여지고 question-input box에 focus가 가게 될 것이다.

해당 내용을 toggleOneShot case의 break문 뒤에 추가해주고 저장 후 vscode를 reload 하면 해당 변경 내용을 확인할 수 있다.