Chrome 확장 매매 봇 패널: 권한·상태·중지 동작 설계 OnTech Insight

TECH INSIGHT / EXPLAINED

매매 봇의 모든 정보를 작은 팝업에 넣으면 정작 중지 버튼을 찾기 어려워진다. 확장 프로그램을 리모컨으로 설계하면 우선순위가 선명해진다. 현재 상태, 최근 갱신 시각, 명시적인 시작·중지, 설정 저장 결과가 첫 화면에 있어야 한다.

개념을 설명하는 AI 제작 일러스트. 세 사람이 확장 팝업의 시작·중지 버튼과 권한, 상태 갱신을 설명하는 모습

기존 사용 화면과 소개 이미지

기존 글에 담았던 사용 화면과 소개 이미지를 함께 보며 구조와 동작을 확인할 수 있습니다.

다크 테마 확장 팝업 전체 화면 - 상단 봇 상태 pill, 액션 버튼, 종목 카드

실행 엔진과 팝업의 수명을 분리한다

팝업은 닫히면 문서와 자바스크립트 실행 환경이 사라진다. 주문 스케줄이나 신뢰해야 하는 상태를 팝업 타이머에 맡기지 않는다. 백엔드는 작업을 계속 관리하고 팝업은 열릴 때 최신 상태를 조회한다. 폭 400px은 설계 예시이며 모든 팝업의 고정 규격은 아니다.

권한은 API 사용에 맞춰 선언한다

아래는 팝업과 호스트 접근을 설명하는 최소 manifest 예시다. 실제 배포에서는 아이콘과 필요한 구성 파일을 더한다. 일반적인 창 생성 때문에 permissions에 windows를 추가할 필요는 없다. 탭의 민감한 속성을 읽는 경우에는 별도의 권한 요건을 확인한다.

{
  "manifest_version": 3,
  "name": "Bot Status Panel",
  "version": "1.0.0",
  "action": {"default_popup": "popup.html"},
  "host_permissions": ["https://script.google.com/*"]
}

호스트 권한은 해당 스킴과 호스트에 대한 접근이며 특정 GAS 배포 한 개만 허용하는 경계가 아니다. 요청 URL을 코드에서 제한하고 서버에서도 인증한다. GAS Content Service의 리디렉션 대상 등 실제 요청 경로를 개발자 도구로 확인하여 필요한 호스트만 선언한다. API 호출이 확장 페이지에서 발생하는지 콘텐츠 스크립트에서 발생하는지도 구분한다.

JSON 요청과 CORS를 혼동하지 않는다

일반 웹 페이지에서 Content-Type: application/json은 CORS의 단순 요청 조건에 해당하지 않아 사전 요청이 발생할 수 있다. 확장 페이지는 호스트 권한에 따라 다른 접근 권한을 가진다. 헤더를 본문으로 옮기는 요령을 인증 설계로 대신하지 말고 실제 확장과 배포 설정에서 확인한다.

API 래퍼 한 곳에서 허용된 동작, 시간 초과, HTTP 상태, JSON 형식과 응답 스키마를 검사한다. 로그인 HTML이 돌아왔는데 response.json()만 호출하면 원인을 놓치기 쉽다. 요청 중 버튼을 비활성화하고, 성공 응답 뒤 서버 상태를 다시 조회한다. 시간 초과는 서버의 처리 취소를 뜻하지 않으므로 같은 시작 요청을 무작정 재전송하지 않는다.

정지 의도를 뒤집지 않는다

사용자가 ‘중지’를 눌렀다면 서버에 비활성화라는 원하는 상태를 보낸다. 상태를 재조회한 뒤 반대 동작을 선택하는 토글은 다른 기기의 변경과 경합할 때 시작으로 뒤집힐 수 있다. 서버에서 요청 ID와 상태 버전을 확인하면 중복 처리와 충돌을 명시적으로 다룰 수 있다.

화면 렌더링은 상태 객체 한 곳에서 수행한다. 활성화 여부와 마지막 성공 시각을 함께 보여 주고, 조회 실패를 OFF로 표시하지 않는다. ‘확인 불가’나 ‘정보가 오래됨’이 별도 상태여야 한다. 색상만으로 구분하지 말고 텍스트도 제공한다.

테마와 비밀 정보의 저장 위치

밝기 설정은 팝업의 localStorage에 둘 수 있지만 서비스 워커에서는 사용할 수 없다. 초기 테마는 head의 패키지 내 외부 스크립트에서 스타일 표시 전에 적용하고 유효한 값만 허용한다. MV3 확장 페이지에는 인라인 스크립트와 onclick 대신 패키지에 포함된 스크립트와 addEventListener를 사용한다.

비밀번호 입력 형식은 화면 가림 기능이다. 입력 순간에는 확장 메모리에 값이 존재한다. 저장된 API 시크릿을 설정 조회 응답으로 다시 돌려주지 말고 ‘등록됨’과 교체 기능을 제공한다. localStorage와 확장 패키지는 비밀 저장소로 취급하지 않는다.

Chrome 웹스토어 제출 전에 기능과 데이터 흐름 점검하기

참고 자료

내용·예제 검토: 2026-09-29

Chrome 확장 매매 봇 패널: 권한·상태·중지 동작 설계