하나의 브라우저 확장을 Chrome과 Firefox에 패키징하기

전체 코드는 GitHub 저장소에서 확인할 수 있습니다.

시작한 이유 #

Reddit에는 게시물의 번역 버전이 제공될 때 이를 볼 수 있는 native translate 기능이 있습니다. 번역 기능을 새로 만들 생각은 없었고, 사용할 언어와 번역 사용 여부를 조금 더 쉽게 바꾸고 싶었습니다.

그래서 language selection과 enable/disable toggle을 제공하는 작은 브라우저 확장을 만들기 시작했습니다. 먼저 Chrome에서 구조를 잡고, 이후 같은 소스를 Firefox에도 전달할 수 있도록 범위를 넓혔습니다.

확장 프로그램은 Manifest V3를 기준으로 네 부분으로 나눴습니다.

popup은 사용자의 선택을 받는 역할만 담당합니다. 이 설정을 content script에서 사용할 수 있도록 연결하고, 페이지의 링크를 변경하는 흐름을 준비했습니다.

옵션을 늘리기 전에 popup과 페이지 스크립트가 연결되는지부터 확인했습니다. 이 정도의 작은 경계가 있어야 이후 동작을 수정할 때 어느 부분을 봐야 하는지 분명해집니다.

Chrome용 구조를 그대로 복사해 Firefox 디렉터리를 따로 만들지는 않았습니다. 공통 소스는 한 곳에 두고, 브라우저마다 필요한 차이는 패키징 단계에서 반영했습니다.

manifest의 version과 author 정보를 정리하고 Firefox settings를 추가했습니다. package.sh는 이 설정을 기준으로 브라우저별 결과물을 만들도록 구성했습니다.

확인해야 할 실행 위치도 늘어났습니다. popup, background와 content script의 로그가 섞이지 않도록 필요한 경우에만 로그를 켤 수 있는 configurable logging utility도 함께 추가했습니다.

로컬에서 기능이 동작하는 것과 다른 사람이 설치할 수 있는 상태는 달랐습니다.

아이콘과 manifest 정보를 정리하고, 설치 방법과 빌드 과정을 문서에 남겼습니다. 확장 프로그램이 어떤 데이터를 다루는지도 설명할 수 있도록 PRIVACY_POLICY.md를 추가했습니다.

스토어 등록까지 완료했다는 이야기는 아닙니다. 이 단계에서는 Chrome과 Firefox용 파일을 반복해서 만들 수 있는 패키징 흐름과 배포에 필요한 문서를 준비하는 데 집중했습니다.

번역 설정 UI보다 더 오래 고민한 부분은 소스를 나누지 않고 두 브라우저에 전달하는 방법이었습니다. 다음에 작은 확장 프로그램을 만들더라도 기능 구현과 함께 manifest 차이, 패키징과 문서를 처음부터 확인하려고 합니다.