개발 계기
트위치 채팅에 ㅋㅋㅋ를 치다가 문뜩 귀찮아져서
자바스크립트를 공부하는 겸 확장프로그램을 만들기로 했다.
개발기
1. 채팅 복사기능
만들기 전에 구상했던 것은 두 가지였다.
- 다른사람의 채팅을 클릭하면 내용을 변수에 저장한다.
- 나의 채팅 입력창에 붙여넣는다.
1은 어찌 쉽게 구현하였으나, 문제는 2에서 발생하였다.
나는 단순히 input의 value 값을 바꾸면 되겠지라고 생각했지만,
값을 바꾸어도 적용이 안되는 문제가 발생했다.
트위치는 react 기반의 사이트이고, 사용자 입력을 slate.js로 구현 한 듯하다.
군대가기 전에 리액트 찍먹을 해봤는데 input에 사용자 입력(이벤트)이 주어질때만 값이 변하는 것으로 기억한다.
이를 해결하기 위해
구글에서 찾아보아도 관련 자료도 적어서 거의 포기하려던 참에
How do I change slate editor value using Javascript - stackoverflow.com
위 자료를 통해 구현에 성공하였다!
2. popup에 스위치 기능 만들기
초기 1.0 버전엔 익스텐션이 불안정 해보여서 이용자들의 유실을 막고자,
익스텐션 on/off를 쉽게 할 수 있도록 스위치 기능을 추가해야 겠다고 생각했다.
[CSS] 토글 스위치 버튼 만들기 - 나를 제외한 천재들's tistory.com
위 블로그에서 스위치 디자인 만드는 법을 배우고, 약간 수정하였다.
chrome.storage API를 통해 on/off 상태를 저장하였다.
스토어 등록
어찌저찌 익스텐션을 완성하고, 개발자 계정 생성비 5달러를 낸뒤
나의 익스텐션을 크롬 웹스토어에 등록시켰다.
쥐구멍에 볕드는 날