개발 동기
어느날 아프리카티비 채팅창을 보다가 원하는 채팅을 따로 모아보고 싶다는 생각이 들어서 찾아보니 트위치에는 이미 twitch badge collector 라고 확장 프로그램이 개발되어 있었다.
나도 저런 기능을 구현해보고 싶은 마음에 남는 시간에 조금씩 만들어 보던게 어느정도 사용할 수 있을 정도가 된 듯하여 글을 남기게 되었다.
크롬 확장 프로그램 개발은 생소했지만 구글에서 제공하는 가이드를 보고 따라하니 그리 어렵지 않게 만들 수 있었다.
Summary
확장 popup, background, content 3가지 구성요소로 구현하였는데,
확장프로그램 팝업창에서 필터를 설정(ex.채팅을 친 사람의 닉네임)하여 크롬 스토리지에 저장하고, content.ts에서는 채팅을 모을 element를 추가하고 채팅창 dom을 분석하여 새로운 채팅창에 필터를 거친 채팅을 모아주었다.
개발 과정
처음 개발을 진행할 때 상대경로 지정이 원활하지 못하여 리액트와 craco를 통해 환경을 구성하고 시작하게 되었다.
팝업의 디자인은 아래와 같이 만들었다 ㅋㅋ.
form의 체크박스와 추가된 닉네임이 크롬 스토리지에 저장되어 크롬을 재실행하거나 시간이 오래 지나도 확장을 삭제하지 않으면 계속 유지되었다.
다음으로 dom의 변화를 감지(새로운 채팅이 올라온다던가) 하여 채팅을 필터링하고 모으기 위한 과정에서 MutationObserver에 대해 공부하고 이를 활용하였다.
처음엔 채팅이 올라올때마다 마지막에 올라온 채팅을 필터링하는 방식으로 구현했지만 이렇게 하게 되면 채팅속도가 아주 빠를 경우 채팅이 씹히는 문제가 생기게 되어 채팅에 인덱스를 부여하여 mutation observer의 콜백이 호출될 때마다 추가된 모든 채팅에 대하여 필터를 거치는 방식으로 수정하였다.
소감
버전 1.0.0을 크롬 웹 스토어에 등록하고 현재 심사 중에 있다. 빠르면 2~3일 늦으면 2주까지도 걸린다고 하는데 최대한 빨리 통과되었으면 한다.
아직 최적화 문제나 코드 재사용 등 여러 문제가 많지만 일단은 크롬 웹 스토어 등록이 먼저기 때문에 빠르게 만들었던 것 같고 다음 버전에는 코드도 수정하여 품질을 높이고 디자인도 예쁘게 바꿔봐야겠다.
5월 23일 오전에 크롬 웹스토어 게시가 완료되었다.
현재 개인 공부 때문에 손을 못대고 있지만 조금씩 수정해나가고 싶다.
종종 아프리카 TV를 보는사람으로서 대단하십니다.
댓글 달고 결과 보도록 해보겠습니다!!