[Web3] Chrome Extension for Web3 Wallet with React (1)

소개

최근 새로운 서비스를 위한 Blockchain Network를 구축하여 연동 및 블록체인 서비스를 올리는 작업을 수행하고 있습니다.

제가 담당하는 개발 영역은 아니라서 직접적인 시간 투자는 없지만 새로운 네트워크에서 작업도 하는 김에 해당 네트워크에 Tx를 쏠 수 있는 간단한 Web3 Wallet을 개발하고자합니다.

---

크롬 익스텐션이란?

블록체인 회사에 이직하면서 처음으로 Metamask와 같은 Web3 월렛을 사용하고 Chrome Extension에 대해 알게 되었습니다.

Chrome Extension이란 쉽게 말하는 Brower와 상호작용할 수 있는 모듈의 집합체라고 볼 수 있습니다.

Chrome Extension의 모듈은 Background & Content Script, Option Page & UI Element 등으로 구성됩니다.

각각의 모듈이 하는 역할은 Google Chrome Extension Docs를 참고해주시면 될 것 같습니다.

튜토리얼은 Typescript를 사용하고 CRA 프로젝트를 Eject하여 Chrome Extension을 개발할 생각입니다.

---

CRA 프로젝트 생성

우선 아래의 커맨드를 입력합니다.

npx create-react-app . --template typescript

CRA 프로젝트의 생성이 완료되면 프로젝트를 eject하겠습니다.

npm run eject

> Are you sure you want to eject? This action is permanent. (y/N)

> y

프로젝트가 eject되고 config & script dir가 생성됩니다.

* 저는 이어서 tsconfig.json과 webpack.config.js를 수정하여 절대 경로를 설정합니다.

---

Chrome Extension Config 설정

Application의 Configuration은 manifest.json에 정의되어 있습니다. CRA로 프로젝트를 생성하면 public 폴더에서 해당 파일을 찾을 수 있습니다.

// Exapmle

{
  "short_name": "Stargate",
  "name": "Stargate Web3 Wallet",
  "description": "Chrome extension for the Web3 Wallet using React and Typescript",
  "version": "0.1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo192.png",
    "48": "logo192.png",
    "128": "logo192.png"
  }
}

자세한 manifest.json 설정은 Chrome Extension Manifest Docs를 참고합니다.

---

Application Build 실행

package.json

{
	...etc,
	"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
}

package.json을 확인하면 익숙한 Command를 확인할 수 있습니다.

Chrome Extensions Bundle을 생성하기 위해 npm run build Command를 실행하면 위와 같은 빌드 결과물을 확인할 수 있습니다.

npm run build는 Javascript 혹은 Typescript로 작성된 React 프로젝트를 js와 같은 Bundle로 인코딩하여 index.html에 Inject합니다.

---

Load Chrome Extension

Chrome의 우측 상단의 퍼즐 아이콘을 클릭하고 "확장 프로그램 관리" 탭을 선택합니다.

"압축해제된 확장 프로그램을 로드합니다."를 선택하고 build 디렉토리를 가져옵니다.

확장 프로그램 탭에서 프로젝트가 추가됨을 확인할 수 있습니다. (프로젝트에 에러가 있을 경우 Error 메세지가 표시됩니다.)

Pinning을 통해 우측 상단 Chrome Extensions 목록에 추가할 수 있습니다.

생성한 Chrome Extension을 클릭했을 때, 위의 이미지와 같은 화면이 나오면 성공입니다.

---

Next Step

다음에는 Chrome Extension에 Content Script를 추가하겠습니다.

---

References : Chrome Extension with CRA