Chrome Extension 만들기: 아이디어에서 자동 릴리스까지

Source: Dev.to

소개

Chrome 확장은 유용한 소프트웨어를 가장 빠르게 배포할 수 있는 방법 중 하나입니다.
가볍고 강력하며 명확한 경계 안에서 생각하도록 강요합니다.

이 글에서는 최신 도구를 사용해 Chrome 확장을 만드는 과정과 GitHub Actions를 이용해 버전 관리와 배포를 자동화하는 방법을 살펴봅니다.

우리가 만들 프로젝트

다음 요소를 갖춘 간단한 Chrome 확장을 만들 것입니다:

• 웹 페이지와 상호작용하는 콘텐츠 스크립트
• 로직과 조정을 담당하는 백그라운드 스크립트
• 사용자와의 상호작용을 위한 팝업 UI
• 자동 빌드, 버전 관리, GitHub 릴리스

핵심 구성 요소

Manifest

메타데이터, 권한, 진입점을 정의합니다.

Content Script

웹 페이지 컨텍스트에서 실행됩니다.
DOM을 읽고 조작할 수 있습니다.

Background Script

페이지와 독립적으로 실행됩니다.
상태, 메시징, 라이프사이클 이벤트를 처리합니다.

Popup UI

확장 아이콘을 클릭했을 때 표시되는 일시적인 인터페이스입니다.

Messaging Model

Chrome 확장은 이벤트‑드리븐 방식입니다. 구성 요소들은 서로 직접 접근하지 않습니다.

• 팝업 → 사용자 의도를 전송
• 백그라운드 → 로직을 조정
• 콘텐츠 스크립트 → 페이지에 영향을 줌

배포 전략

Chrome 확장은 프로젝트 단계에 따라 다음 중 하나의 방법으로 배포됩니다.

Chrome Web Store (공개 & 자동 업데이트)

공개 배포를 위해 Chrome Web Store에 확장을 게시할 수 있습니다.

• 5 USD 일회성 개발자 등록 비용 필요
• 자동 업데이트 지원
• 비기술 사용자도 확장을 쉽게 찾을 수 있음

GitHub Releases (무료 & 유연)

사용자는 릴리스 아카이브를 다운로드하고 Chrome에 수동으로 로드하여 확장을 설치합니다.

GitHub Actions를 사용하면 릴리스를 완전히 자동화할 수 있습니다:

• 버전이 지정된 ZIP 아티팩트
• 일관된 빌드
• 검토 또는 승인 절차 없음
• 비용 없음

Auto Scroll Extension

실제 예제로, 저는 Chrome 자동 스크롤러 확장을 만들고 GitHub Actions를 이용해 완전 자동화된 릴리스 파이프라인을 설정했습니다. 프로젝트에는 다음이 포함됩니다:

• 페이지 스크롤을 제어하는 콘텐츠 스크립트
• 사용자와의 상호작용을 위한 팝업 UI
• 조정을 담당하는 백그라운드 스크립트
• 모든 Git 태그마다 자동으로 버전이 지정된 릴리스

Source code

https://github.com/Prajwol-Shrestha/auto-scroll-browser-extenstion

릴리스 자동화 개요

이 프로젝트에서는 릴리스를 다음과 같이 자동화합니다:

• Git 태그(예: v1.0.1)를 푸시
• GitHub Actions가 확장을 빌드
• 빌드 결과물을 ZIP으로 패키징
• GitHub Release가 자동으로 생성
• ZIP이 릴리스 자산으로 첨부