SPA에서 벗어나 보자 익스텐션 개발기1

1. 크롬 익스텐션으로 개발을 진행한 이유는?

기획단계에서 어떻게 하면 사용자들이 서비스를 편리하게 사용할 수 있을 지 팀원들과 고민하다가 일반적인 SPA를 활용한 웹 어플리케이션 방식보단, 익스텐션이 더 적합하다고 생각하였기 때문에 선택하게 되었다. 또한 높은 접근성을 위해서 크롬 익스텐션 중에서 일반적으로 팝업창을 띄워서 하는 방식이 아닌 익스텐션 다운로드 후 ContentScript에서 유튜브의 실제 DOM에 리액트 컴포넌트를 삽입하여 사용자들이 익스텐션을 사용하고 있다는 것을 느끼지 못하도록 구현하기로 결정하였다.

2. 리액트는 버릴 수 없어

우리가 SPA 웹 어플리케이션 만들려고 할 땐 리액트 개발 환경을 편리하게 세팅하기 위해서 두개의 명령어를 입력하는편이다.

npx create-react-app [파일명] // webpack
npm create vite@lateset // vite

 

하지만 내가 지금 개발하려고 하는 것은 크롬 확장 프로그램이기 때문에 background.js와 contentscripts와 같이 각각의 다른역할을 하는 별도의 파일들이 필요한 상황이였다. 하나의 HTML과 번들링된 javascript파일로 빌드하게 되는 SPA와는 어울리지 않는다고 판단하게 되었다.

리액트 라이브러리를 활용하면 작은 코드 조각을 기본 단위로 UI를 구성하기 편리하고 개발의 생산성을 높일 수 있기 때문에 선택하게 되었다. 이러한 이유들로 리액트 라이브러리를 별도로 다운로드 후 웹팩을 커스텀하는 방식으로 개발을 진행하게 되었다.

물론 기본적으로 리액트 환경이 세팅된 웹팩에서 재정의를 해서 하는 방법도 있었지만, 조금 더 웹팩에 대해서 깊게 알고 싶다는 욕심이 들어 필요한 라이브러리들을 하나하나 다운로드 하며 개발을 진행하는 방식을 선택하게 되었다.

 

3. 크롬 익스텐션 개발을 위한 manifest.json

익스텐션을 개발하기 위해선 manifest.json파일이 확장 프로그램에 대한 기본적인 정보와 기능을 정의하는 파일이기 때문에 무조건 필요하다. 공식문서에서는 manifest V2로 제작된 크롬 확장프로그램의 지원을 중단할 것임을 경고하고 있기 때문에 manifest V3로 크롬 확장프로그램을 제작을 진행하였다.

 

3.1 manifest.json

{
  "name": "익스텐션 이름",
  "description": "익스텐션에 대한 설명",
  "manifest_version": 3,
  "version": "1.0.0", 
  "action": {
    "default_title": "Click Me",
    "default_popup": "popup.html"
  },
  "permissions": ["bookmarks", "identity", "identity.email"],
  "host_permissions": ["*://*/*"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    { "matches": ["https://www.youtube.com/*"], "js": ["contentScript.js"] }
  ],
  "externally_connectable": {
    "matches": ["https://www.youtube.com/*"]
  },
}

 

 

- manifest_version 

말 그대로 manifest 버전을 의미하며, 공식문서에 추천 방식대로 버전 3을 사용하는 것을 권장한다.

 

- host_permissions

설정한 사이트에서만 크롬 익스텐션이 동작할 수 있도록 호스트 권한을 설정할 수 있게 지정해준다.

 

- action

우측 상단의 아이콘의 세부 정보를 담당하는 객체이며 default_popup에는 팝업창에 띄우게 될 html의 경로를 입력해준다. 이외에 default_title, default_icons와 같은 세부 속성들이 있다. 해당 프로젝트에서는 popup 인터페이스를 거의 사용하지 않기 때문에 디자인적으로 익스텐션에 대한 설명이 들어갈 예정이다.

 

- background

Document가 없는 영역이므로 제환된 WebAPI 및 확장 프로그램을 사용하는 곳이며, 주기적인 이벤트 트리거, ContentScript와 통신 상태관리 및 이벤트 처리 등의 익스텐션의 핵심역할을 진행한다. 백그라운드 스크립트에서 service worker로 manifest V3에서 변경이 되었기 때문에 구버전의 코드는 꼭 수정을 진행해줘야 된다.

 

- content_scripts

웹 페이지의 Context내에서 동작하는 script이며, 해당 프로젝트에서 핵심 역할을 하게 될 script이다. 해당 프로젝트에서는 Youtube 웹페이지 Context에 실제로 접근해서 서비스가 동작하기 때문이다.

 

- permissions 작성 시 주의사항

permissions 부분에서는 Chrome 익스텐션 API를 사용할 땐 어떤 API를 허가할 것인지 작성하는 부분인데, 만약 사용하지 않은 API가 있다면, 배포를 하기전에 삭제를 진행해야 된다. 아니면 익스텐션 배포를 진행할 때 사용하지 않았기 때문에 배포가 실패하게 되고 manifest.json파일을 수정하고 다시 재배포를 진행해야 된다.

 

 

4. Remind

나도 어느순간 리액트로 SPA만 많이 만들다보니, SPA === React 이라는 것에 빠져있었던 것 같다. 사실 SPA를 구성하기 위해서 React Router가 핵심인 것을 잊어버리고 착각을 해버렸다. React는 사용자 인터페이스(UI) 라이브러리라는 마음속에 다시 한번 새길 수 있었다.

5. 참고자료

https://developer.chrome.com/docs/extensions?hl=ko%EF%BB%BF

확장 프로그램  |  Extensions  |  Chrome for Developers

https://developer.chrome.com/docs/extensions/develop/migrate?hl=ko

Manifest V3로 이전  |  Extensions  |  Chrome for Developers