요약

기존에 관리하던 장난감 브라우저 확장을 조금 개편하기 전에, 개발환경을 조금 정리해 봤다. 정리하면서 같이 기존 소프트웨어 스택을 재정리해 봤다.

목표

모든 빌드 과정은 watch가 가능해야 한다 - 고친 내용이 바로 적용될 수 있어야 개발이 편하다.

브라우저 확장 소개

진리의 MDN 소개 가 있긴 하지만… 간단히 설명하자면,

브라우저에 애드온으로 들어가는 기능인데, 보통 특정 웹사이트에서 동작하면서 기존 웹사이트 위에서 일부 스크립트를 돌리거나, 광고를 차단하거나 등의 기능을 수행하는 프로그램이다. 이를테면 네이버 웹툰 즐겨찾기 같은 기능은 확장 프로그램으로 만들었다.

브라우저 확장의 구조

진리의 MDN again

manifest와 content script가 거의 최소한의 요구사항이고, 이후 필요에 따라 background script (서버처럼 돌아가는 녀석)나 popup 페이지(브라우저 확장에서 자체적으로 표시하는 UI)를 추가해주면 된다.

소프트웨어 스택은 왜 필요한데?

• content script가 조금 커지다 보면 당연히 모듈화가 필요한데, 모듈 전체를 manifest에 지정할 수 없으니 JS 코드를 번들링하는 빌드 과정이 필요해진다.
• typescript로 코드를 작성했다면 당연히 JS로 컴파일하는 과정이 필요하다.
• UI 개발을 위해서도, 빌드 과정을 지원해주는 툴이 필요하다.

뭐가 좋은가요?

Manifest 빌드

content script와 background script를 각각 별도의 타겟 파일로 지정할 수 있는 빌드 시스템이 필요하다. 현재는 webpack을 사용중:

// ...
  entry: {
    contentscript: join(__dirname, 'src/contentscript/index.ts'),
    background: join(__dirname, 'src/background/index.ts'),
  },
// ...

UI 빌드

원래는 Angular material 맛 좀 보려고 Angular를 써봤었는데, 도저히 유지보수가 안된다;; React는 철학부터가 알기 쉽고 업데이트 호환성도 아주 잘 지켜지는 편인데, Angular는 업데이트 스크립트 하나 돌릴때마다 기존 코드를 마구 똥코드로 바꿔버리는 아주 신기한 재주가 있더라.

그다음엔 next.js를 써봤는데 이건 브라우저 확장을 전혀 지원하지 않고 지원할 생각도 없다. watch build 모드도 없고, 빌드 결과물도 잘 로딩이 안된다. 잽싸게 버림.

그냥 쌩 Webpack에다가 React를 붙여서 쓸 수도 있는데, 너무 설정할 게 많아질 것 같아 vite를 써 봤다. vite는 watch build를 잘 지원해줬고 브라우저 확장에서도 잘 동작했다.

결론

막상 UI 개발은 하나도 못하고 오늘도 또 빌드 시스템만 만지다 하루가 다 가버렸다. 찍!