블록체인 지갑 Chrome Extension 개발기

Posted on Mar 21, 2023

9월, 개발 세팅 및 코드 분석

22년 9월, 기존 크롬에 배포 된 블록체인 지갑을 리뉴얼 하는 작업을 맡게 되었다.

최초 이 일을 맡게 되었을 당시에 정말 막막했었다. Vue2로 개발되어있던 기존 프로젝트를 수정해야 했었고, 크롬은 Manifest라는 정책을 따르기 때문에 관련해서 또 공부를 했어야 했다.

Manifest v3 이슈가 처음부터 있었고, 리액트로 개발을 주로 하였어서 처음부터 다시 짜는게 어떨까 생각하고, 시도를 해봤지만, 처음 구조부터 다시 짤 자신이 없었다.

SPA 구조를 알았기 때문에, Vue2 문법과 구조를 쉽게 파악 할 수 있었지만, 크롬 개발은 기존 웹개발과 또 다른 영역 같았다.

기존 개발 된 기능을 다시 개발 하기에는 인력도 시간도 능력도 부족했다. 울며 겨자먹기로 기존 코드를 리팩터링 했었던 것 같다.

10월~11월, 디자인 수정 및 데이터 구조 변경

기존 버전의 단순한 디자인에서 좀더 화려한 디자인으로 수정이 되었고, Flow도 많이 바뀌었다.

많은 기능들은 기존 코드를 재사용 또는 약간의 수정을 거쳤다.

프론트엔드 영역에서는 DB라는게 없기 때문에, 브라우저의 스토리지를 사용하여 데이터를 저장하고, 필요할때 꺼내 쓴다.

Scan에 저장 되어 있는 데이터를 가져와서 유저에게 보여주는 방식으로 리팩터링 하였고, 유저에게 필요한 데이터들은 스토리지에 저장하여 꺼내썼다.

View단에 보여지는 모든 상태는 vuex store에서 상태관리를 한다.

비동기 통신 작업을 위해 action dispatch, mutations commit 메소드로 상태관리.

getter와 computed를 사용하여 상태를 감지한다.

12월~1월, Manifest 이슈 발생 및 원인 발견

보안상 구글 크롬 Manifest v3으로 2023년에 무조건 업그레이드를 해야한다고 이미 얘기가 나와있었다.

해당 이슈에 대해서 인지를 하고 있음에도 불구하고, 개발을 하게되었는데.. 알고보니 생각보다 더큰 문제였다.

기존에 사용되는 background 로직이 완전 다 바뀌어야 하는 심각한 상황이 발생해버렸다.

먼저, manifest 버전업이 힘들었던 원인은 참조하고 있던 블록체인 SDK에서 생긴 원인이었다. SDK에서 알 수 없는 에러를 내서 background 스크립트를 읽어 올 수 없었다.

원개발자인 외국인 개발자에게 협조를 요청했고, SDK 수정 이후에 Menifest 버전을 올릴 수 있었다.

2월, background 로직 수정

manifest 버전에 올라 가면서, chrome runtime 객체의 구조가 바뀌었고, background 구동 방식이 기존 html페이지에서 serviceworker.js 로 바뀌었기 때문에 많은게 바뀌어야 하는 상황이 생겼다.

먼저, background가 항상 떠 있는 방식에서, 현재는 보안 이슈 때문에 295초 마다 background.js가 자동으로 꺼지는 방식으로 되어버렸기 때문에, 계속 살려주는 로직이 필요했다.

수많은 검색을 한 결과, background를 살릴 수 있는 방법을 찾았고, 적용 했다.

3월, 크롬 스토어에 배포 준비 및 버그 수정

제품 디테일에 박차를 가해야한다. 기존 로직에서 중복되는 값들을 모두 제거 하면서, 안정성을 높였다.

QA 담당분과 함께 테스트하며 수많은 잘잘한 버그들을 수정하면서, 디테일을 높였고, 정식 배포를 앞두고 있다.