Chrome Extension 개발하기 - (1)

1. Vue.js를 활용한 크롬 익스텐션 개발 세팅

크롬 확장 프로그램은 Javascript, CSS, HTML 3가지로 구성된 단일 폴더로 이루어져있습니다. 때문에 익숙한 Vue.js의 컴포넌트 기반 개발 방식을 활용하여 UI 요소를 재사용 가능하게 설계하고, 유지보수성을 높이는 방향으로 효율적인 개발을 진행하고자 합니다.

 

1) manifest 파일 작성하기

크롬 뿐만아니라 웨일, 엣지 등 Chromium 기반 브라우저(=오픈소스 웹 브라우저 프로젝트)의 확장 프로그램 개발을 위해선 manifest.json 파일이 필요합니다. manifest.json 파일은 확장 프로그램의 구조와 동작 방식을 정의하고, 브라우저와 상호작용하는 방법을 설정합니다.

 

크롬 웹스토어에 등록할 예정이라 manifest_version을 3으로 설정(크롬에서 유일하게 지원되는 값은 3)했습니다. 실사용자 유치를 목표로 한다면, 브라우저별 지원 버전을 확인하여 적절히 설정하는 것이 중요합니다.

{
  "name": "서비스명",
  "description": "설명",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html"
  }
}

 

name :  확장 프로그램 식별 문자, 배포 후 웹 스토어에 검색되는 명

description : 확장 프로그램에 대한 설명

version : 확장 프로그램의 버전

action.default_popup : 확장 프로그램을 눌렀을 때, 뜨게 될 팝업

 

이 외에도 개발 공식 문서를 참고해 추가해갈 예정입니다.

https://developer.chrome.com/docs/extensions/reference/manifest?hl=ko

매니페스트 파일 형식  |  Manifest  |  Chrome for Developers

 

 

 

2) vue.js 배포 파일 생성하기

Vue 프로젝트 빌드 실행방법

npm run build

 

빌드가 완료되면, Vue 프로젝트 폴더안에 dist라는 폴더(default 설정)가 생성되고, dist 폴던안에 배포할 수 있는 최적화된 정적 파일들이 포함됩니다.

 

테스트를 위해 chrome://extensions/페이지로 이동 후 우측 상단 개발자 모드를 활성화 시킵니다. 3개의 활성화 된 버튼 중

압축해제된 확장 프로그램을 로드합니다.를 선택해 빌드한 프로젝트를 업로드합니다. 그러면, 아래와 같이 확장 프로그램 버튼이 생기며 바로 확인할 수 있습니다.

 

프로그램 아이콘을 지정하지 않았는데, 임의로 지정한 서비스명 첫 글자로 아이콘이 만들어진 것 같습니다.

 

 

 

이 외에도 개발을 위해 공식 문서를 꼼꼼히 참고하여 진행해야겠습니다. 크롬 웹스토어에 게시하려면 5달러만 결제하면 자격이 부여되지만, 개인 정보 처리 방침 등 주의 깊게 작성해야 할 내용들이 몇 가지 있습니다. 이 중 하나라도 방침에 맞지 않으면 재게시 요청을 해야 하므로, 한정된 프로젝트 기한 내에 개발을 완료하기 위해서는 해당 개발 부분을 우선순위로 두고 진행해야 합니다.

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

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

 

 

---

2. 기술적 고민

크롬 익스텐션의 기능 특성 상 빠른 데이터 로딩과 응답성이 중요하다고 생각했습니다. 그래서 이와 관련해 개발 시 고려해야할 부분을 정리해봤습니다.

 

 

1) API 호출 최적화

크롬 익스텐션 팝업을 3개의 탭으로 구성하면서, 각 탭에서 API를 호출하는 방식을 고민했습니다. 탭1은 사용자들이 가장 자주 사용하는 기본 페이지로, GPT API를 통해 데이터를 처리하는 과정을 포함하고 있습니다. 그래서 팝업 초기 로딩 시에는 탭1과 관련된 API만 호출하는 방향으로 결정했습니다.

 

탭2와 탭3은 사용 빈도가 상대적으로 낮고, 최신 데이터가 중요한 영역이므로 탭 이동 시점에서 API를 호출하는 방식을 채택했습니다. 이 방식은 불필요한 API 호출을 방지해 초기 팝업 로딩 속도를 개선하고, 사용자가 탭을 이동할 때마다 최신 데이터를 실시간으로 제공할 수 있는 이점이 있습니다.

 

2) 탭 이동 간 캐싱 고려

동일한 탭으로 재방문할 때마다 API를 호출하지 않도록, 탭 데이터 캐싱을 활용하는 방식을 고려하였습니다. 예를 들어, 탭1에서 다른 탭으로 이동한 후 다시 탭1으로 돌아올 경우, 캐싱된 데이터를 우선적으로 표시하도록 설계하는 것입니다. 탭1의 경우 최신 데이터보다는 빠른 접근성과 사용자 경험이 더 중요하기 때문에 이러한 방식이 적합하다고 판단했습니다. 이렇게 불필요한 네트워크 요청을 줄여 성능을 최적화할 수 있으므로, 클라이언트 측(localStorage, SessionStorage) 캐싱을 사용해 적용해보려합니다.