글

Chrome Side Panel 상태 관리: 닫았다 열어도 작업을 이어가는 설계

-
Chrome 확장 프로그램의 팝업은 툴바 아이콘을 눌렀을 때 잠깐 열렸다가 포커스를 잃으면 닫힙니다. Side Panel은 웹페이지 옆에 계속 열어 둘 수 있고 탭을 이동해도 유지할 수 있어 메모장, 타이머, 계산기처럼 작업을 이어가는 도구에 더 잘 맞습니다. 하지만 “오래 보이는 UI”와 “메모리에 계속 살아 있는 UI”는 같은 뜻이 아닙니다. 사용자가 패널을 닫거나 확장 프로그램이 업데이트되면 문서와 JavaScript 상태는 다시 만들어질 수 있습니다. Manifest V3 서비스 워커도 유휴 상태에서 종료되므로 전역 변수만 믿을 수 없습니다. 먼저 보는 핵심 DOM은 화면 표현, JavaScript 객체는 현재 편집 상태, chrome.storage 는 복구 가능한 원본으로 역할을 나누세요. 패널이 열릴 때 저장값을 한 번 복원하고, 변경은 모아서 저장하며, 이벤트 리스너는 한 번만 연결하는 구조가 기본입니다. 팝업과 Side Panel의 수명 주기는 무엇이 다른가 Chrome의 Side Panel API 공식 문서 는 Side Panel을 웹페이지 옆에서 지속적인 경험을 제공하는 확장 페이지로 설명합니다. 설정에 따라 탭을 이동해도 열린 상태를 유지할 수 있고, 확장 페이지이므로 Chrome API에도 접근할 수 있습니다. 항목 팝업 Side Panel 일반적인 종료 시점 포커스를 잃으면 닫힘 사용자가 닫거나 다른 패널로 전환할 때까지 표시 가능 적합한 작업 빠른 명령, 짧은 조회 메모, 계산, 타이머처럼 이어지는 작업 UI 상태 전략 열 때마다 복원하는 전제가 강함 살아 있는 동안 유지하되 재생성도 견뎌야 함 탭 이동 팝업은 이미 닫힘 설정에 따라 열린 상태 유지 가능 Side Panel이 열려 있는 동안에는 해당 확장 페이지의 DOM과 메모리 상태를 사용할 수 있습니다. 그렇다고 let currentNote 같은 전역 변수만 저장소처럼 사용하면 안 됩니다. 패널 문서가 사...
댓글 쓰기
자세한 내용 보기

Chrome 확장 프로그램에서 WebHID 사용하기: Input·Output·Feature Report

-
키보드와 마우스만 HID(Human Interface Device)인 것은 아닙니다. 바코드 스캐너, 커스텀 버튼 패드, 계측 장치처럼 운영체제의 범용 드라이버를 사용하면서도 제조사 고유 데이터를 주고받는 장치도 HID 프로토콜을 사용합니다. Chrome의 WebHID API를 이용하면 네이티브 드라이버용 프로그램을 별도로 만들지 않고 JavaScript에서 이런 장치를 선택하고, 리포트 구조를 확인하고, 바이트 데이터를 읽고 쓸 수 있습니다. 이 글에서는 Manifest V3 확장 프로그램의 사이드 패널에서 장치를 연결하는 흐름을 중심으로 정리합니다. 먼저 보는 핵심 장치 선택은 사용자의 클릭으로 시작하고, 연결 후에는 device.collections 에서 지원 리포트를 먼저 확인합니다. Input은 이벤트로 받고, Output과 Feature 쓰기는 장치 문서에 정의된 ID와 길이를 지켜야 합니다. WebHID가 다루는 세 가지 리포트 HID 통신을 시작하기 전에 리포트의 방향부터 구분해야 합니다. 종류 방향 일반적인 용도 Input Report 장치 → 브라우저 버튼 상태, 센서 값, 스캔 결과 수신 Output Report 브라우저 → 장치 LED, 진동, 동작 명령 전송 Feature Report 양방향 설정 교환 동작 모드, 보정값, 펌웨어 설정 읽기·쓰기 각 장치가 어떤 리포트 ID와 바이트 길이를 지원하는지는 HID 리포트 디스크립터에 의해 결정됩니다. WebHID에서는 device.collections 를 통해 컬렉션과 리포트 정의를 살펴볼 수 있습니다. 임의의 ID와 데이터를 보내기 전에 장치 제조사의 프로토콜 문서와 이 정보를 먼저 확인해야 합니다. Manifest 권한과 실행 위치 Chrome 확장 프로그램에서 WebHID 자체를 쓰기 위한 별도의 manifest 권한은 필요하지 않습니다. 대신 requestDevice() 를 호출하면 Chrome이 장치 선택 창을 ...
댓글 쓰기
자세한 내용 보기

Chrome 확장 프로그램 다국어 지원: Manifest V3에서 5개 언어 적용하기

-
이미지
Chrome 확장 프로그램 다국어 지원: Manifest V3에서 5개 언어 적용하기 Chrome 확장 프로그램을 영어로만 만들다가 한국어, 일본어, 스페인어, 독일어까지 지원하려면 단순히 문자열을 번역하는 것만으로는 부족합니다. Manifest V3의 chrome.i18n 구조, 정적 HTML과 JavaScript에서 생성되는 동적 UI, 컨텍스트 메뉴, 기존 사용자 데이터까지 함께 살펴야 합니다. 최근 Simple Side Note 1.4.0에 5개 언어를 적용하면서 사용한 구조를 기준으로, 기존 확장 프로그램을 안전하게 다국어화하는 방법을 정리합니다. 1. _locales 디렉터리 만들기 Chrome 확장 프로그램의 기본 번역 단위는 _locales/<언어>/messages.json 입니다. text _locales/ en/messages.json ko/messages.json ja/messages.json es/messages.json de/messages.json 각 파일은 같은 메시지 키를 가져야 합니다. 영어 파일의 일부는 다음처럼 작성할 수 있습니다. json { "extensionName" : { "message" : "Simple Side Note" }, "extensionDescription" : { "message" : "A private notepad in your browser sidebar" }, "addToMemo" : { "message" : "Add to Memo" } } 한국어 파일은 키를 유지하고 message 만 번역합니다. json { "extensionName" : { "message...
댓글 쓰기
자세한 내용 보기

Android RxJava Polling을 Kotlin Flow로 바꾸기: repeatOnLifecycle과 재시도

-
이미지
이 글은 기존 Android Retrofit2 RxJava polling: 일정 간격으로 API 호출하기 와 짝을 이루는 마이그레이션 가이드입니다. RxJava로 구현된 polling을 Kotlin Flow와 repeatOnLifecycle 로 옮기는 과정을 실행 가능한 코드로 다룹니다. Android RxJava Polling을 Kotlin Flow로 바꾸기: repeatOnLifecycle과 재시도 이미 RxJava로 polling을 구현한 프로젝트에서 Kotlin Coroutines와 Flow로 옮기면 구조화된 동시성, 자연스러운 취소 처리, 생명 주기 연동을 더 단순하게 만들 수 있습니다. 이 글에서는 RxJava 3 polling 코드를 Kotlin Flow로 단계별로 바꾸고, 화면 생명 주기와 안전하게 연결하는 방법을 다룹니다. 핵심 질문 이 글의 답 RxJava interval 은 Flow로 어떻게 바꾸나? flow + delay 또는 while().emit().delay() 루프 switchMapSingle 은 Flow로 어떻게 표현하나? 가장 최신 결과만 남기는 transformLatest / mapLatest 오류로 polling이 끊기지 않게 하려면? 요청 내부에서 예외를 상태로 변환, retryWhen 으로 지수 백오프 화면이 사라지면 자동으로 멈추려면? repeatOnLifecycle(STARTED) 에서 수집 테스트는 어떻게? runTest , TestDispatcher , 가짜 Repository 왜 Flow로 바꾸는가 RxJava는 여전히 강력한 라이브러리지만, 새 Kotlin 프로젝트에서는 다음 이유로 Coroutines/Flow가 자연스러운 선택이 됩니다. 비교 RxJava 3 Kotlin Flow 취소 전파 Disposable 수동 관리 구조화된 동시성(부모-자식) 생명 주기 연동 LiveData / Lifecycle ...
댓글 쓰기
자세한 내용 보기