네이버 치지직 스트리밍 채팅 중 특정 닉네임의 채팅만 따로 추적·표시해 주는 크롬 확장 프로그램입니다.
- 다운로드 후 크롬 브라우저 주소창에
chrome://extensions를 입력해 접속합니다. - 화면 우측 상단의 개발자 모드를 켭니다.
- 압축해제된 확장 프로그램 로드 버튼을 클릭한 뒤, 방금 다운로드한 폴더를 선택합니다.
- 필터할 닉네임 설정
- 치지직 페이지 접속
- 치지직(네이버 스트리밍 사이트)에 접속 후, 채팅창이 보이는 상태를 유지합니다.
- 확장 프로그램 팝업 열기
- 크롬 툴바 오른쪽 상단(퍼즐 모양 아이콘)에 새로 설치된 확장 프로그램 아이콘이 보이면, 이를 클릭하여 팝업을 엽니다.
- 필터링된 채팅창 열기
- 팝업 안의 버튼(“채팅 걸러내기”)을 누르면 별도의 팝업 창이 열리며, 설정한 닉네임의 채팅만 실시간으로 표시됩니다.
-
특정 닉네임 필터
설정한 닉네임만을 실시간으로 모니터링 한 후 그 닉네임의 채팅 메시지를 팝업 창에 표시합니다. -
채팅 실시간 업데이트
MutationObserver를 통해 새로운 채팅이 올라올 때마다 필터링을 자동 처리합니다. -
프로그램 꺼짐 방지
알림 기능을 이용해 프로그램을 1분마다 깨웁니다.
-
채팅 데이터 추출 (
content.js)- 치지직 사이트의 채팅 영역을 관찰(MutationObserver)합니다.
- 들어온 채팅에서 원하는 닉네임과 일치하는 메시지만 추출합니다.
- 추출된 채팅 데이터를 백그라운드 스크립트로 전달합니다.
-
백그라운드 스크립트 (
background.js)content.js로부터 전달된 채팅 데이터를 받아 보관합니다.- 필터된 채팅 정보를 수신할 페이지(
filtered.html)가 연결되면, 해당 페이지에 메시지를 보여 줍니다. - 확장 프로그램이 종료되지 않도록 주기적으로 깨어나는 알람 설정도 추가했습니다.
-
필터링된 채팅 페이지 (
filtered.html+filtered.js)- 백그라운드 스크립트와 Port 통신을 맺어, 필터링된 채팅 메시지를 실시간으로 전달받습니다.
- 전달받은 채팅 메시지를 화면에 표시하고, 새 메시지가 오면 자동으로 스크롤합니다.
-
크롬 확장 프로그램 설정 (
manifest.json)- 크롬 확장 프로그램의 버전, 권한, 동작 환경 등을 정의합니다.
- 치지직 사이트에서 어떤 스크립트를 삽입할지, 어떤 파일이 백그라운드 스크립트인지 등을 선언합니다.
-
팝업 페이지 (
popup.html+popup.js)- 확장 프로그램 아이콘을 클릭했을 때 열리는 팝업 창입니다.
- 여기서 “채팅 걸러내기” 버튼을 누르면,
filtered.html을 새로운 팝업 창으로 띄워 필터링된 채팅 내역을 확인할 수 있게 합니다.
해당 프로그램은 네이버 naver.com과 치지직 chzzk.naver.com과 아무 연관이 없습니다.