Message Channel Tracker
Chrome 확장

메시지 채널 흐름을 깨뜨리지 않고 관찰하세요

window.postMessage · MessageChannel · BroadcastChannel · Worker/ServiceWorker의 메시지를 색상과 그룹으로 정리해 DevTools 콘솔에서 한눈에 확인할 수 있습니다.

비침투적(Non‑intrusive) 토글 가능 읽기 전용
빠르게 시작하기 GitHub 보기
DevTools 콘솔에서 메시지가 색상/그룹으로 정리되어 흐름을 보여주는 장면

왜 MCT인가요?

빠른 시작

  1. 주소창에 chrome://extensions 입력
  2. Developer mode 활성화
  3. Load unpacked → 저장소의 extension/ 선택
  4. 확장 아이콘을 고정한 뒤, 켜기/끄기로 로깅을 제어합니다.

웹스토어 배포 전까지는 수동 로드로 사용하세요.

사용법

아무 페이지의 DevTools 콘솔에서 실행해 보세요. 콘솔에 MCT 로그가 출력됩니다.

window.postMessage("hello from MCT", "*");

여러 채널을 한 번에 시험하려면 로컬 Playground를 사용하세요. pnpm run docs로 정적 서버를 실행한 뒤 /playground/에 접속하세요.

MCT 콘솔 상세 미리보기

동작 원리

  • content.js가 tracker.js를 삽입해 페이지 컨텍스트에서 안전하게 내장 객체를 래핑합니다.
  • 메시지는 색상/그룹으로 정리되어 콘솔에 출력되며,
  • 토글 이벤트(MCT:SET_ENABLED)로 로깅을 제어합니다.
  • 원래 동작을 바꾸지 않는 읽기 전용 설계입니다.

필요 권한: activeTab, scripting

주의

대량 메시지 환경에서는 성능을 위해 필요할 때만 켜거나, 콘솔 필터링을 함께 사용하세요.

FAQ

성능에 영향이 있나요?

일반적인 개발/디버깅 시나리오에서 영향을 최소화하도록 구현했습니다. 대량 메시지 환경에서는 로깅을 꺼 부하를 줄일 수 있습니다.

프로덕션 페이지에 사용해도 되나요?

개발/테스트 용도로 권장됩니다. 프로덕션 환경에서는 필요한 시점에만 켜 주세요.

무엇을 로깅하나요?

window.postMessage, MessageChannel/MessagePort, BroadcastChannel, Worker/SharedWorker, ServiceWorker의 postMessage/수신 메시지 이벤트를 다룹니다.