Velog에 템플릿 기능을 사용해보자

Kyu0·2025년 6월 1일

Chrome Extension chrome velog velog-template

0. 도입 🎬

안녕하세요, 정말 오랜만에 쓰는 포스트입니다.
저는 포스트를 작성할 때 나름의 정형화된 템플릿이 있는데요, 이를 지키기 위해 새 포스트를 작성할 때마다 이전에 작성한 포스트를 띄워놓고 왔다갔다하면서 번거롭게 글을 작성하게 되는 일이 발생했습니다. 그래서 개발하게 되었습니다.

Velog Template

1. 개발 환경 💻

운영체제 : macOS Sequoia 15.4.1
IDE : VSCode
프로그래밍 언어 : Typescript
패키지 매니저 : npm

2. Velog Template이란

제가 개발한 크롬 익스텐션입니다.
자신만의 정형화된 구조를 저장해뒀다가 새 글을 작성할 때마다 불러오고 싶은데 현재 velog에는 그런 기능이 없어 해당 문제점을 해소하기 위해 개발했습니다.
Velog Template을 설치하게 되면 velog의 글 작성 페이지 하단에 아래의 사진과 같이 템플릿 불러오기, 템플릿 저장하기 버튼이 노출됩니다.

템플릿 불러오기 버튼을 클릭할 경우 작성 중인 포스트의 내용이 저장된 템플릿의 내용으로 변경됩니다.

템플릿 저장하기 버튼을 클릭할 경우 작성 중인 포스트의 내용이 저장됩니다.

최대한 단순하고 직관적인 기능을 제공

3. 개발 중 마주친 어려움 🔥

velog 에서는 CodeMirror라는 라이브러리를 통해 포스트 작성 기능을 제공하고 있습니다.

이 때문에 단순히 포스트의 내용에 해당하는 HTML 태그의 값을 조작하면 사용자가 예상하는 동작을 하지 않을 수 있습니다.

placeholder가 사라지지 않는 모습

따라서 CodeMirror 전역 객체에 접근해서 setValue 메소드를 호출하여 사용자가 저장해놓은 템플릿(문자열)을 전달해야 정상적으로 동작하는데, 크롬 익스텐션과 브라우저의 자바스크립트 실행 환경이 달라 CodeMirror 객체를 제대로 참조하지 못했습니다.

이 문제를 해결하기 위해 Cross Document Messaging 을 활용했습니다.

injected.js 파일에 VELOG_SET_CONTENT 타입의 이벤트를 청취하는 코드를 작성합니다.

// injected.js
window.addEventListener('message', (event) => {
  if (event.data?.type === 'VELOG_SET_CONTENT') {
    const CODE_MIRROR = document.querySelector('.CodeMirror')?.CodeMirror;
    if (CODE_MIRROR) {
      CODE_MIRROR.setValue(event.data.content);
    }
  }
});

content.ts 파일에서 템플릿 불러오기 버튼을 클릭했을 경우 VELOG_SET_CONTENT 타입의 이벤트를 발생시키도록 코드를 작성합니다.

  // 관련 코드
  window.postMessage({ type: 'VELOG_SET_CONTENT', content }, '*');

injected.js 파일을 원래 페이지(velog의 포스트 작성 페이지)에 추가합니다.

// parser.ts
    // ... 생략
    const script = document.createElement('script');
    script.src = chrome.runtime.getURL('injected.js');
    script.onload = () => script.remove();
    (document.head || document.documentElement).appendChild(script);
    /// ...생략