본문 바로가기
Dev/Try & Projects

Arcacon GIF Downloader (아카콘 GIF 다운로더) 크롬 확장프로그램

by E.Clone 2023. 8. 7.

소요시간: 약 10시간

초기버전 개발을 마친 후 크롬 웹 스토어에 제출하여 검토중

구글링 해 보니 약 3일정도 생각하면 된다고 한다.

 

3일간의 검토 후 현재 크롬 웹 스토어에서 배포

https://chrome.google.com/webstore/detail/arcacon-gif-downloader/ajccljbpmpeebkknkmmladkcicmnhadb?hl=ko

 

 

 

 

아이콘
아카라이브에서 원본 GIF 다운로드 기능을 제공한다

 

해당 확장프로그램의 눈에 띄는 한계점은 아래 두 가지이다.

 

1. 로그인을 필수로 요구한다:

GIF 파일 주소를 얻는 다른 방식을 하나 더 생각하고 있는데, 이게 된다면 이후 업데이트로 로그인은 필수가 아니게 될 수 있다.

2. 댓글의 아카콘만 가능하다:

케이스를 나누어 글 본문도 가능하도록 업데이트 될 수도 있다. 하지만 아카콘 판매 페이지에서는 지금 방식으로써는 작동 불가능. 1번에서 생각하고 있다는 다른 방식을 더 확장시킨다면 이것도 해결 가능할지도 모른다. 아카콘 판매 페이지가 얼마나 정교하게 이루어졌는지에 따라 달려있다.

 

 

GPT-4 코드 인터프리터를 적극 활용

개발 완료까지 약 310회의 대화를 진행하였다. 주요 과정은 아래와 같다.


1. 목표 설정: 사용자가 arca.live에서 특정 비디오(아카콘)를 우클릭하여 GIF 형태로 다운로드할 수 있는 크롬 확장 프로그램을 개발하기로 결정했습니다.

2. 초기 설계 및 구현:
   - `content.js`에서 사용자가 우클릭한 비디오를 감지하고, 해당 비디오의 정보를 `background.js`에 전달하는 기능을 구현했습니다.
   - `background.js`에서는 비디오 정보를 바탕으로 다운로드 URL을 생성하고, 해당 URL의 이미지를 다운로드하는 기능을 구현했습니다.

3. 오류 수정 및 기능 개선:
   - 매니페스트 파일과 스크립트 파일의 권한 설정, URL 처리 방식 등을 수정하면서 여러 오류와 문제점을 해결했습니다.
   - 특정 비디오를 우클릭하면 컨텍스트 메뉴에 다운로드 옵션을 표시하는 기능을 추가했습니다.

4. 매니페스트 V3 마이그레이션:
   - 매니페스트 V2에서 V3로의 전환을 수행하면서 `background.js`를 `service_worker.js`로 변경하고, 관련 권한 및 설정을 수정했습니다.
   - 이 과정에서 발생한 여러 오류를 수정했습니다.

5. 아이콘 및 기타 세부 사항 추가:
   - 확장 프로그램의 아이콘을 설정했습니다.
   - 컨텍스트 메뉴에 아이콘을 표시하려 했으나, 해당 기능이 지원되지 않아 제거했습니다.

6. 테스트 및 마무리:
   - 최종적으로 확장 프로그램이 원하는 대로 동작하는 것을 확인했습니다.
   - ID 중복 오류 문제를 해결하고, 파일 구조를 정리했습니다.

7. 스토어 등록 준비:
   - 확장 프로그램을 크롬 웹 스토어에 등록하기 위해 필요한 권한 요청, 원격 코드 사용 여부 등을 확인하고, 문서 작성을 준비했습니다.

 

초기버전 개발 후기:

- GIF파일의 접근이 까다로운 아카라이브 구조를 우회하는데에 상당한 시간이 소모되었다.

- CORS 정책인지 이걸 우회한다고 온갖 방법을 시험해보느라 상당한 시간이 소요되었다. 결과적으로 성공은 해서 다행.

- 처음 생각했던 것보다 몇배 몇십배의 오류와 버그가 발생한다. 

- 크롬 웹 스토어에 등록하려면 매니페스트 버전 3을 강제하고있다. 매니페스트 버전 2로 개발을 마쳤는데 스토어 등록이 불가하다고 하여 3버전으로의 마이그레이션을 하는데에도 상당히 애를 먹었다.

반응형