won-solution.com

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 같은 전역 변수만 저장소처럼 사용하면 안 됩니다. 패널 문서가 사...

키보드와 마우스만 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의 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...

전면 개정 안내 (2026-07-24) 2022년에 작성한 설치 중심의 글을 Socket.IO 4.x와 ES Modules 기준으로 다시 작성했습니다. 이번 글을 끝까지 따라 하면 방에 입장하고 메시지를 주고받는 웹 채팅을 실행할 수 있습니다. Socket.IO 채팅의 핵심은 단순히 emit() 한 번을 호출하는 것이 아닙니다. 서버가 사용자를 식별하고, 올바른 방에 메시지를 전달하며, 연결이 끊겼을 때의 상태와 중복 전송까지 다뤄야 합니다. 이 글에서는 먼저 학습용으로 충분히 작으면서도 다음 기능을 갖춘 채팅을 만듭니다. 닉네임과 방 이름을 입력해 입장 같은 방의 사용자에게만 메시지 전송 서버에서 입력값과 방 입장 여부 검증 ACK(승인 응답)로 전송 성공 여부 확인 일시적인 연결 끊김 후 상태 복구 메시지 ID를 이용한 화면 중복 표시 방지 Socket.IO와 WebSocket은 같은 것일까? 완전히 같지는 않습니다. WebSocket은 양방향 통신 프로토콜이고, Socket.IO는 그 위에서 이벤트, 자동 재연결, 승인 응답, 방(Room), 브로드캐스트 같은 기능을 제공하는 라이브러리입니다. 환경에 따라 HTTP long-polling으로 연결한 뒤 WebSocket으로 업그레이드할 수도 있습니다. 따라서 순수 WebSocket 서버에 Socket.IO 클라이언트를 바로 연결할 수는 없습니다. 서버와 클라이언트가 모두 Socket.IO 프로토콜을 사용해야 합니다. 항목 WebSocket Socket.IO 통신 방식 표준 프로토콜 이벤트 기반 라이브러리 자동 재연결 직접 구현 기본 제공 방과 브로드캐스트 직접 구현 기본 제공 ACK 직접 메시지 규약 설계 콜백 방식 제공 전송 폴백 없음 long-polling 후 업그레이드 가능 1. 프로젝트 만들기 Node.js의 지원 중인 LTS 버전을 사용합니다. 빈 폴더에서 다음 명령을 실행하세요. bash ...