Chrome Extension 개발자 등록 후기

개발 단계에서는 확장 프로그램 관리 페이지(chrome://extensions)에서 수동으로 설치하여 쉽게 테스트할 수 있습니다. 매번 다시 로드할 필요 없이, 로컬에서 빌드 파일을 업데이트하면 자동으로 반영됩니다. 추가적으로, 확장프로그램을 개발한 Vue.js 환경에서 코드 저장 시 빌드가 자동으로 실행되게 설정해 번거로운 절차를 줄였습니다.

개발자모드 확장 프로그램 설치

// package.json
// "dev:extension": "vite build --watch"  => 저장 및 빌드 동시

"scripts": {
    "dev": "vite",
    "dev:extension": "vite build --watch",
    "build": "vite build",
    "build:extension": "zip -r Byeoldam.zip dist/",
    "preview": "vite preview"
  }

 

 

 

 

프로젝트를 진행하며 실사용자를 만들어 사용자 중심 리팩토링을 진행하기 위해 확장프로그램을 웹스토어에 등록했습니다. 공식문서에 따르면 3일안에는 모든 업데이트가 반영된다 했지만 저처럼 처음 개발자 등록을 하고 첫 확장 프로그램을 등록하는 경우 3주까지도 걸릴 수 있다고 안내되있었습니다.

 

 

1. 개발자 등록하기

https://chrome.google.com/webstore/devconsole/4c1cfdaf-1e25-4576-89f6-c0ee5eeb0923

Chrome Web Store

개발자 등록 절차는 어렵지 않았습니다. 체크할 사항은 2가지 입니다.

1) 개발자 등록으로 5$ 한 번만 결제하면 이후 추가로 청구되는 비용이 없습니다.

2) 결제 등록 창에서 국가/지역에 한국이 없는데, 저같은 경우 일본이라하고 우편번호도 양식맞춰서 임의로 등록했습니다.

 

 

완료하면, 대시보드 창으로 이동합니다.

 

위 사진은 현재 게시된 상태일 때 보이는 화면입니다. 우측 상단 새 항목을 클릭하면 프로그램 등록을 진행할 수 있습니다.

 

 

 

 

2. 확장 프로그램 등록하기 - 파일 선택

 

 

 

이 때, 파일은 수동으로 업로드할 때와 달리 dist 폴더 자체가 아니라, dist 폴더 안의 파일들을 압축해야 합니다. 

 

 

 

 

3. 확장 프로그램 등록하기 - 스토어 등록정보

파일 로드 성공 후 등록 화면

 

 

다음으로, 스토어 등록정보와, 개인정보 보호, 배포 탭을 하나씩 선택하며 필수록 입력해야하는 내용들을 성실히 작성해야합니다. 스토어 등록정보 탭에서는 그래픽 저작물에 이미지들이 요구한 픽셀에 딱 맞아야 업로드가 되니, 미리 잘 준비하는 것을 추천드립니다.

 

스토어 아이콘(필수) 128x128 픽셀

캡쳐 화면(최소 1개 필수) 1280x800 또는 640x400 JPEG 또는 24bit PNG

마키 프로모션 타일 1400X560

 

 

 

 

 

4. 확장 프로그램 등록하기 - 개인 정보 보호

 

개인 정보 보호탭에서 입력해야할 정보로는 크게 두가지가 있습니다. 첫번째로, manifest.json 파일에서 설정한 permissions와 content_scripts에 설정한 권한들에 대한 설명을 기재해야 합니다. 크롬 웹스토어에서 확장 프로그램을 등록할 때, 사용자가 어떤 데이터에 접근하는지 투명하게 공개해야 하기 때문입니다. (입력해야하는 권한 들은 본인이 로드한 파일 기준으로 자동으로 생성됩니다.)

 

 

처음에 위와 같이 storage, activeTab, tabs 3가지를 permissions로 설정했었는데, 아래와 같은 이유로 tabs 권한을 삭제해 달라는 요청이 왔었습니다. 브라우저 탭 이동 동작을 위해 tabs API를 사용해서 권한으로 설정했었는데, 기본적인 동작이라 권한 요청까지는 필요없다는 내용이었습니다.(공식 문서를 이런 부분때문에 꼼꼼히 읽어봐야함을 느꼈습니다.)

 

 

 

 

두번째로, 사용자 데이터 사용을 체크해줘야하는데, 북마크할 때 사용자가 접근하는 여러 웹페이지의 정보들을 수집하기 때문에 해당 하는 사항들을 다 체크해줘야 했습니다. 또한 어떻게 이 데이터를 서비스에서 활용하는지 사용자에게 안내할 개인정보처리방침 문서의 경우 노션으로 작성해서 아래와 같이 링크를 첨부했습니다. 개인정보처리방침 작성의 경우 GPT의 도움을 받아서 금방 작성할 수 있었습니다.

 

 

 

 

5. 확장 프로그램 게시 완료

이렇게 나머지 필수 사항들을 다 체크해서 완료하면, 3일 뒤 정도 아래와 같은 메일이 왔습니다. 그리고 몇 시간 뒤에 바로 웹스토어에서 조회도 가능했습니다.(다양한 등록후기들을 봤을때 저처럼 사용자 데이터를 요구하는 프로그램이 아니면 3일 이내에 빠르게 처리되는 경우가 많은 것 같습니다. 하지만 저처럼 사용자 데이터를 요구하는 순간 좀 더 확인 절차가 필요해져서 3일 이상 걸릴 확률이 높습니다.)