react를 사용해서 크롬(chrome) extension 만들기

여러가지 방법으로 크롬 extension을 만들 수 있지만, 본 글에서는 React 를 사용해서 크롬 extension을 만드는 방법에 대해 소개합니다.

 

React 프로젝트 생성하기

우선 extension으로 만들 리액트 프로젝트를 CRA를 사용해서 생성합니다. 본 글에서는 타입스크립트 기반의 리액트 프로젝트를 생성하도록 하겠습니다.

yarn create react-app my-chrome-app --template typescript

 

chrome extension 만들기

manifest 설정 변경

생성된 프로젝트의 public 디렉토리를 보면 manifest.json 파일이 있습니다.

manifest.json 파일은 브라우저에 이 앱에 대한 정보를 알려주는 파일입니다. 이 앱이 크롬 익스텐션이라고 브라우저에 명시를 해줘야, extension 프로젝트를 만들 수 있습니다. 핵심이라고 할 수 있는 파일입니다.

 

Chrome Extension App의 규격에 맞게 manifest.json 파일을 수정해봅시다. 아래 필드는 필수적으로 넣어줘야 하는 값들입니다. 하나라도 없으면 extension 앱으로 만들 수 없습니다.

• manifest_version: manifest 버전을 설정 필드 스키마에 대한 버전이라고 생각하면 됩니다. 2023.05 기준으로 v3이 가장 최근 버전입니다. 현재는 스토어에 올리려면 무조건 3버전으로만 가능하니 본 글에서는 3 버전으로 설정하겠습니다
• version: 앱의 버전을 뜻함
• name: 사용자에게 표시되는 chrome extension의 이름을 뜻 함
• action > default_popup: 진입점(entry point)를 설정

 

{
  "manifest_version": 3,
  "version": "1.0.0",
  "short_name": "React App",
  "name": "Create React App Sample",
  "action": {
    "default_popup": "index.html"
  },
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

 

chrome extension 등록

manifest 설정이 완료되었으면, react 프로젝트를 빌드합니다.

yarn build

 

빌드된 산출물을 로컬 chrome 브라우저에 extension을 추가해봅시다. chrome://extensions/ 으로 들어가 우측 상단에 "개발자 모드"를 활성화 해줍니다.

 

크롬 extension 등록 (1)

 

그리고, "압축해제된 확장 프로그램을 로드합니다." 클릭하여 빌드 된 리액트 산출물 디렉토리를 선택합니다.

크롬 extension 등록 (2)

 

아래와 같이 리액트 앱이 크롬 extension으로 추가됩니다.

크롬 extension 등록 (3)

 

extension 핀 고정을 하고, 눌러보면 react 프로젝트 초기 화면이 보이는 것을 확인 할 수 있습니다.

크롬 extension 등록 (4)

 

크롬 extension 등록 (5)

 

아이콘 변경

extension 아이콘 모양도 변경 할 수 있는데, manifest.json의 action 필드 설정을 추가하면 됩니다.

• default_icon: chrome extension아이콘 설정
• default_title: extension에 마우스를 올렸을 때, 나오는 툴팁
• default_popup: entry point

 

{
  "action": {
    "default_icon": {
      "16": "images/icon16.png", 
      "24": "images/icon24.png", 
      "32": "images/icon32.png"  
    },
    "default_title": "Click Me", 
    "default_popup": "index.html"
  }
}

 

최대 너비/높이

popup 형태의 chrome extension은 너비 800px 높이 600px을 최대로 가지게 됩니다. 만약 이 너비/높이보다 큰 경우, 스크롤이 생기므로 참고바랍니다.

 

react-router-dom과 같이 사용하기

보통 페이지 라우팅을 구현하기 위해 react-router-dom을 많이 사용하는데, 보통의 리액트 앱처럼 <BrowserRouter>를 사용하게되면, 라우팅이 안되는 것을 확인 할 수 있습니다.

 

따라서, 사용할 때 주의할 점이 있습니다. 크롬 extension은 보통의 웹 서비스처럼 일반적인 주소를 가지고 있지 않고, 아래와 같은 주소를 가지게 됩니다. (실제로 주소를 가지고 있지 않다고 생각하면 됨)

 

chrome-extension://agcmaaeddpoechfgejhmeepbciomikfl/index.html

 

주소로 페이지 라우팅리 불가능하기 때문에, react-router-dom의 <MemoryRouter>를 사용해서, 메모리상에서 라우팅 관리를 해야합니다. 코드로 예시를 들면,

import React from 'react';
import { createMemoryRouter, RouterProvider } from 'react-router-dom';
// ...
const router = createMemoryRouter([
  {
    path: ROUTE_PATH.HOME,
    element: <HomePage />,
  },
  {
    path: ROUTE_PATH.ABOUT,
    element: <AboutPage />,
  },
]);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

 

 

References

• https://developer.chrome.com/docs/extensions/mv3/intro/
• https://reactrouter.com/en/main/router-components/memory-router

Welcome to the Chrome Extension Manifest V3 - Chrome for Developers

MemoryRouter v6.16.0