리액트와 뷰로 크롬 익스텐션 빌드하기

뷰로 크롬 익스텐션을 만들 일이 생겨 구글링을 해봤는데, 생각보다 리소스가 훨씬 적어 놀랐습니다. 😂

그래서 제가 이전의 경험을 살려 간단하게 정리해봤습니다.

 

크롬 익스텐션에는 크게 두 가지 종류가 있는데, 브라우저의 새 탭을 익스텐션으로 대체하는 탭 타입과 아이콘을 클릭하면 익스텐션이 동작하는 팝업형 타입이 존재합니다. (사실 따로 부르는 명칭은 없습니다...)

탭 타입 / 팝업형 타입 익스텐션

크롬 익스텐션의 심장은 바로 manifest.json 파일입니다.

{
  "manifest_version": 2,
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "short_name": "Popup",
  "name": "Popup type Demo extension",
  "description": "팝업 타입 데모 세팅입니다.",
}

{
  "manifest_version": 2,
  "version": "0.0.1",
  "short_name": "newTab",
  "name": "NewTab Type extension demo",
  "description": "탭 타입 익스텐션 데모입니다.",
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
}

• 팝업형 익스텐션을 만들기 위해서는 browser_action 이라는 속성이 필요합니다. (이 속성을 통해 상단의 익스텐션 아이콘을 클릭하면 index.html을 팝업 형태로 열도록 지시합니다.)
• 탭 타입 익스텐션을 만들기 위해서는 설정에 chrome_url_overrides 라는 속성을 추가해 새 탭을 덮어쓸 html 파일을 지정합니다.

 

어... 거창한 튜토리얼이 될 것 같았지만 이게 전부입니다!

위에서 다룬 내용들을 응용해, 뷰 기반의 크롬 익스텐션을 재빨리 만들어 보겠습니다. (리액트에서도 100% 동일하게 동작합니다.)

먼저 public 폴더에 manifest.json 파일을 생성하고, 두 타입중 한 가지 설정을 적용해 작성합니다.
(browser_action 또는 chrome_url_overrides 라는 키는 필수이며, 나머지 이름, 설명과도 같은 키는 MDN 문서 를 참고하시면서 작성하실 수 있습니다.)

 

manifest.json을 얼추 작성했다면, 빌드(npm build 또는 yarn build)합니다!

빌드하면 리액트는 build 폴더가, 뷰는 dist 폴더가 생성될텐데요, 해당 폴더의 경로를 기억해 뒀다가 [압축해제된 확장 프로그램을 로드합니다.] 버튼을 통해 익스텐션 목록에 업로드합니다.

Hot Reload를 지원하지 않으므로, 개발 중간중간 결과물을 확인하려면 오른쪽의 [업데이트] 버튼을 눌러주셔야 합니다.

조금 싱겁지만, 이게 전부입니다!

이제 하던 대로 뷰 어플리케이션을 제작하면, 크롬 브라우저 위에서 동작하는 특수한 앱을 제작할 수 있습니다.

추가로 크롬 익스텐션은 크롬 브라우저만이 갖는 API(Ex. storage)를 추가로 활용할 수 있는데요, storage(로컬스토리지 대신 활용하는 저장소)나 permissions(네트워크 요청 허용을 위한 API) 같은 API는 유용하게 사용되니 이런 게 있다 정도를 아시면 도움이 될 듯 합니다!

 

마지막 팁으로는, react-router-rom을 사용해 익스텐션 내에서 페이지를 이동하는 방법은 불가능하고, 언제나 조건부 렌더링을 통해 렌더링하는 컴포넌트를 결정하는 방법만을 사용해야 합니다. (아마 익스텐션 앱은 자체적인 히스토리 스택이 없을 것이기 때문에 vue-router 에서도 불가능할 것이라고 생각됩니다.)